Page 1 of 1

CSS Float left, dropping div down

Posted: Sat Jan 07, 2006 1:06 pm
by hawleyjr
OK, may not be the best subject line; but I tried :oops:

I'm trying to create two collumns using CSS. Each collumn needs to be 40% of the page. However, when the page is resized the right collumn drops below the left collumn. How do I prevent the right collumn from dropping down? I've tried min-width but that didn't work :(


Note: This works fine in FF not the same in IE


http://hawleyjr.com/test/divtest.htm

Code: Select all

<style>
.div_holder{
width: 100%;
min-width:600px;
}
.left_coll_holder{
width: 40%;
height: 100%;
float:left; 
border: 1px solid green;
padding: 10px;
margin: 10px;
}
.right_coll_holder{
width: 40%;
height: 100%;
float:left; 
border: 1px solid red;
padding: 10px;
margin: 10px;
}

</style>
<div class="div_holder"> 
  <div class="left_coll_holder"> </div>
  <div class="right_coll_holder"> </div>
</div>

Posted: Sat Jan 07, 2006 5:31 pm
by matthijs
I think you're dealing with the IE double margin float bug (or whatever it's called).
http://positioniseverything.net/explore ... argin.html
When a div is floated left AND has a margin left, IE doubles the margin.

Solution is giving the div a display:inline;