CSS Codes
CSS Layouts
Results 1 to 4 of 4

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

  1. 09-18-2007, 04:09 PM #1
    me_myself
    me_myself is offline Regular Coders
    Join Date
    Aug 2007
    Location
    MO USA
    Posts
    106
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Question CSS (DIV) Layout looks good in Firefox but breaks in IE - Please Help

    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 !!

    Code:
    <!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>
    Last edited by me_myself; 09-18-2007 at 04:20 PM.
    Reply With Quote Reply With Quote
  2. 09-19-2007, 12:04 AM #2
    Jas's Avatar
    Jas
    Jas is offline Senior Coders
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    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:

    Code:
    <!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>
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions
    Reply With Quote Reply With Quote
  3. 09-19-2007, 04:09 PM #3
    me_myself
    me_myself is offline Regular Coders
    Join Date
    Aug 2007
    Location
    MO USA
    Posts
    106
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the help.

    I added a padding-right:1px to row1 and row2 - it fixed it.
    Reply With Quote Reply With Quote
  4. 09-20-2007, 07:16 PM #4
    Jas's Avatar
    Jas
    Jas is offline Senior Coders
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Of course! I should have thought of that. Good solution!
    Last edited by Jas; 09-20-2007 at 10:41 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules