SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up CSS layout - please help

    Hey all. I am creating a clean and simple (and common) layout via CSS for my business site. Could one of the wizards here take a look to ensure it is structured correctly based on the output? It seems to work fine in IE6 and Mozilla - but I had some issues getting the 5px space between the #content and #sidebar areas to show correctly. I had to add another #contentbox containter to put both of them in.

    The code is below. The output is here.

    Code:
    <style type="text/css">
    <!--
    body {
    		margin: 0;
    		padding: 0;
    		font: 10px arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    		}
    #container {
    		margin: 2em auto;
    		width: 730px; 
    		text-align: left;
    		background-color: #ffffff;
    		border: 1px solid #b8b8b8;
    		padding: 5px;
            }
    #header {
    		height: 125px;
    		background-color: #f5f5f5;
    		margin-bottom: 5px;
    		border: 1px solid #e6e6e6;
    		}
    #mainnav {
    		height: 20px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		}
    #contentbox {
    		width: 730px;
    		margin-top: 5px;
    
    		}
    #sidebar {
    		float: right;
    		width: 170px;
    		height: 100px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		margin-bottom: 5px;
    		}
    #content {
    		float: left;
    		height: 100px;
    		background-color: #fafafa;
    		border: 1px solid #e6e6e6;
    		width: 550px;
    		margin-bottom: 5px;
    		}
    #footer	{
    		clear: both;
    		height: 20px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		}
    
    -->
    </style>
    Many thanks in advance!
    Last edited by cyberian; Jan 29, 2004 at 13:43.

  2. #2
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quick update - i just tested it in IE 5.0 - the #sidebar and #content come out wider than everything else. Seems to be the box model problem.

    Due to that, rather than applying a hack, I changed the code by removing the #containerbox - as that seemed to be the problem. However, it still shows up different in IE 5 - now there is no gap between the #content and #sidebar divs.

    Code:
    <style type="text/css">
    <!--
    body {
    		margin: 0;
    		padding: 0;
    		font: 10px arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    		}
    #container {
    		margin: 2em auto;
    		width: 730px; 
    		text-align: left;
    		background-color: #ffffff;
    		border: 1px solid #b8b8b8;
    		padding: 5px;
            }
    #header {
    		height: 125px;
    		background-color: #f5f5f5;
    		margin-bottom: 5px;
    		border: 1px solid #e6e6e6;
    		}
    #mainnav {
    		height: 20px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		}
    #sidebar {
    		float: right;
    		width: 170px;
    		height: 100px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		margin-bottom: 5px;
    		margin-top: 5px;
    		}
    #content {
    		float: left;
    		height: 100px;
    		background-color: #fafafa;
    		border: 1px solid #e6e6e6;
    		width: 550px;
    		margin-bottom: 5px;
    		margin-top: 5px;
    		}
    #footer	{
    		clear: both;
    		height: 20px;
    		background-color: #f5f5f5;
    		border: 1px solid #e9e9e9;
    		}
    
    -->
    </style>
    It doesn't seem like one of the hacks would apply to this - but how do I get the margin to show up between #content and #sidebar in ie5 as it does in ie6 and mozilla? The link to see the new code in action is here.
    Last edited by cyberian; Jan 29, 2004 at 12:43.

  3. #3
    SitePoint Zealot cyberian's Avatar
    Join Date
    Oct 2003
    Location
    MA
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry problem solved

    Well it only took me all afternoon and I'm sick of trying to figure this one out. So, I changed the layout a bit and removed the 5px padding. Seemed to fix the problem for ie5. I actually like the layout better than before - so worked out nicely. However I still don't understand why the other layout did not work - I tried the simplified hack and ie6 kept grabbing the width data meant for ie5 ... argh.

    New layout: here.


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
  •