CSS + Float Property Problem

[Pulse]

I have a website that i want to have 2 colums down to represent two different content areas, but when i assign them their float properties the div that both are in just dis-regards their height and so looses the background area and brings the next div up the page instead of staying at the bottom of the page where it should be.

 

[Tripnologist]

You just need to clear the floats.
Put the following in your CSS and then give the parent div class="clearfix"

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display:inline-block;}

 

[Pulse]

cheers mate, i'll give it a try other i sort my new problem

 

[Pulse]

erm not sure how its ment to work but it does, i have added them two to the top of the css document and they dont seem to be working well.

do i have to add another div called clearfix and place the two contents area within it?

edit: just re-read, i = idoit..

 

[Tripnologist]

You've got it figured out now?

<div id="container" class="clearfix">
  <div id="floatLeft"></div> 
  <div id="floatRight'></div> 
</div><!-- end of container -->

the container is your pre-existing parent div.

 

[Pulse]

ah, big love!

i had that right but i had 3 too many </div>

thanks