CSS Float left, dropping div down

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

CSS Float left, dropping div down

Post 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>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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;
Post Reply