Log in

View Full Version : CSS (DIV) Layout looks good in Firefox but breaks in IE - Please Help


me_myself
09-18-2007, 04:09 PM
Please check the below code in IE 7.0 - when you reduce the width of the browser (Internet Explorer), the col2_row1 and col2_row2 wraps to the next line and displays below col1. I need it to stay where it is and not wrap. Can someone please give me a fix for this - Thanks a lot in advance.

Reduce the width of IE slowly to see the problem !!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body{margin:0; padding:0;}
#pagewidth{min-width:700px;}
#header{position:relative; height:125px; width:100%; background-color:#003366; min-width:1000px;}
#maincol{background-color: #FFFFFF; float:left; display:inline; position: relative; width:100%;}
#footer{ height:25px; clear:both; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; padding-left:20px; padding-top:11px; color:#333333; background-color:#999999;}
#row1{width:100%; min-width:1000px; clear:both;}
#row2{width:100%; clear:both; min-width:1000px;}
#col1_row1{width:25%; float:left; overflow:hidden; position:relative; background-color:#00FFFF; }
#col2_row1{width:75%; float:left; display:inline; position: relative; background-color:#3366CC; }
#col1_row2{width:25%; float:left; overflow:hidden; position:relative; background-color:#33CC66; }
#col2_row2{width:75%; float:left; display:inline; position: relative; background-color:#339966; }
</style>
</head>
<body>
<div id="pagewidth" >

<!-- Start of Header -->
<div id="header" >Header</div>
<!-- End of Header -->

<!-- Start of Center Part -->
<div id="wrapper" class="clearfix" >
<div id="maincol" >
<div id="row1">
<div id="col1_row1">Left Box 1</div>
<div id="col2_row1">Main Box 1</div>
</div>

<div id="row2">
<div id="col1_row2">Left Box 2</div>
<div id="col2_row2">Main Box 2</div>
</div>
</div>
</div>
<!-- End of Center Part -->

<!-- Start of Footer -->
<div id="footer" >some copyright info </div>
<!-- End of Footer -->
</div>
</body>
</html>
Jas
09-19-2007, 12:04 AM
Is it suppose to resize with the window, because it does in IE but not FF. Anyway, a simple fix would be to make the size 1 px smaller then it needs to be. IE-- if I am not mistaken-- is rounding the size UP in pixels when it is an odd number. For example, 99/2 = 50 instead of 49. Hopefully someone will correct me if I am wrong, but I think that is your problem.

Try this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body{margin:0; padding:0;}
#pagewidth{min-width:700px;}
#header{position:relative; height:125px; width:100%; background-color:#003366; min-width:1000px;}
#maincol{background-color: #FFFFFF; float:left; display:inline; position: relative; width:100%;}
#footer{ height:25px; clear:both; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; padding-left:20px; padding-top:11px; color:#333333; background-color:#999999;}
#row1{width:100%; min-width:1000px; clear:both; background-color:#3366CC;}
#row2{width:100%; clear:both; min-width:1000px; background-color:#339966;}
#col1_row1{width:24%; float:left; overflow:hidden; position:relative; background-color:#00FFFF; }
#col2_row1{width:75%; float:left; display:inline; position: relative; background-color:#3366CC; }
#col1_row2{width:24%; float:left; overflow:hidden; position:relative; background-color:#33CC66; }
#col2_row2{width:75%; float:left; display:inline; position: relative; background-color:#339966; }
</style>
</head>
<body>
<div id="pagewidth" >

<!-- Start of Header -->
<div id="header" >Header</div>
<!-- End of Header -->

<!-- Start of Center Part -->
<div id="wrapper" class="clearfix" >
<div id="maincol">
<div id="row1">
<div id="col1_row1">Left Box 1</div>
<div id="col2_row1">Main Box 1</div>
</div>

<div id="row2">
<div id="col1_row2">Left Box 2</div>
<div id="col2_row2">Main Box 2</div>
</div>
</div>
</div>
<!-- End of Center Part -->

<!-- Start of Footer -->
<div id="footer" >some copyright info </div>
<!-- End of Footer -->
</div>
</body>
</html>
me_myself
09-19-2007, 04:09 PM
Thanks for the help.

I added a padding-right:1px to row1 and row2 - it fixed it.
Jas
09-20-2007, 07:16 PM
Of course! I should have thought of that. Good solution! :)