Div Height to fill content? - Simple surely?

[scooter41]

Ok, so I am stick on the most basic of things! I have created a css layout, and now I just cant get part of it working as it should in IE

I basically have a grey background div container, that should be filled with 2 div columns, and the grey background should resize accordingly. However it just sits at the top of the page behind the 2 columns, even when I use a clear style.

To see the page I am referring to click here:

http://mjduncan.dreamshock.com/test.html

Its fine in firefox, just not on IE I cant work out why but realize it must be me doing something stupid!

Any help on this simple prob appreciated!

 

[Tripnologist]

Here you go..


Add his to your css

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

and this class to your product div

<div ID=Product class="clearfix">

Also remove your clearing break and clear css. Don't need it. The above works much better.


Should also mention that you should at the very least add a doctype. You also might find things a little easier later on if you give body 0 padding and 0 margin.

 

[scooter41]

works perfect in both IE and firefox.... great post thanks!

And cheers for the body tags and doc type... this was just a copy paste of the relevant parts of the site to make the post clearer

But thanks for taking the time to suggest anyway....