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

Question

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: block' 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?

Answer 1

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 .

Answer 2

在嵌套的divs下添加<div style="clear: both"></div>

Answer 3

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.

Answer 4

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;
}

Answer 5

stuff here, nested <div> etc.的<div> stuff here, nested <div> etc.被解释为html标签