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>