ansaurus

Question

Answer 1

+1 A:

You need to apply the clearfix class to #bkg.

<div class="frame clearfix" id="bkg">

Ken Browning 2009-09-30 03:23:39

thanks for posting this.

Jason N. Gaylord 2009-09-30 03:34:22

Answer 2

+2 A:

Just add this extra rule to your selector:

div.frame {
     overflow:hidden;
}

You shouldn't need to rely on the clearfix unless you have elements coming outside of the frame, nor should you need to rely on any extraneous markup with clear:both.

meder 2009-09-30 03:24:20

Answer 3

+1 A:

What you want to do is "clear the float." There are many options out there, some easy, and some quite complex.

The easiest, is to add a clearing div after the last column, like this:

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

And that should work.

Here are some other ways (some, pure css):

Bill Turner 2009-09-30 03:24:35

Answer 4

+1 A:

You can have the frame float as in:

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

and this does it. Or you can put an extra element in the frame with a "clear fix". The pre-made 960 grid does this for you with a class "clear":

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

ndp 2009-09-30 03:25:32

thanks for your post.

Jason N. Gaylord 2009-09-30 03:34:59

ansaurus

tags:

views:

answers:

Background and CSS Floats

related questions