how can I make two successive "div" tags not "bleed" into each other?

I have two divs:

<div style="height:30px; font-weight:bold" align="center">
  <div class = 'membership_description'>
   stuff here, nested <div> etc.
  </div>

 <div style="height:30px; font-weight:bold" align="center">Using Coupon &amp;quot;special-current&amp;quot; - Special access just for current members</div>

For some reason, the second div ends up appearing in the middle of all the stuff under the first div.

I tried 'display: blo开发者_如何学JAVAck' for the first div but no love, ideas?

I think I see part of the problem -- there is this inline style -- when I remove "height" from Google Chrome, it becomes normal. But I don't have access to that, only css...can I override?

---

add <div style="clear: both"></div> under the nested divs

---

The most likely cause of this is that you aren't clearing your floats properly for your inner nested divs. Try adding overflow: auto to .membership_description.

---

Try using float:left; or float:right; for both divs, this way they shouldnt overlap each other. You can also try <div style="clear: both"></div> of course.

---

I think I see part of the problem -- there is this inline style -- when I remove "height" from Google Chrome, it becomes normal. But I don't have access to that, only css...can I override?

You can override an inline style with the !important attribute

#element
{
    height: auto !important;
}

---

the <div> in stuff here, nested <div> etc. is interpreted as a html tag