ansaurus

Question

Background not showing behind floating divs

Answer 1

+3 A:

You container div #right_b is collapsing because its children are floating. You can fix this with the "Clear-Fix" technique. You may want to check out the following Stack Overflow post for a few solutions:

Which method of ‘clearfix’ is best?

One popular solution is to add overflow: hidden to your container div: #right_b:

#right_b {
   background:transparent url('img/right.png');
   background-position: right top;
   background-repeat: repeat-y;
   overflow: hidden;
}

Another common one is to add a <div style="clear: both;"> </div> before closing your container div:

<div id="first">
   <div id="left_b">
      <div id="right_b"> 
         <div id="text">text 1</div>
         <div id="text2">text 2</div>
         <div style="clear: both;">&nbsp;</div>
      </div>
   </div>
</div>

Daniel Vassallo 2010-04-12 16:57:10

Answer 2

A:

I think you have to give #right_b also a minimal height:

#right_b{
 background:transparent url('img/right.png');
 background-position: right top;
 background-repeat: repeat-y;
 min-height: 30px;
}

Float elements are took out of the normal document flow, so if an element does not contain other "normal" elements, this element has a height of 0 (as it has no content).

Felix Kling 2010-04-12 17:01:33

ansaurus

tags:

views:

answers:

Background not showing behind floating divs

related questions