SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with my layout

    Hi Guys,

    I know there are places you can get CSS already built layouts from, but I was keen to do my own. Now here's the code:

    HTML 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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <style>
    /* Start the stylesheet */
    
    * { padding: 0; margin: 0; }
    
    
    body {
     font: normal 11px verdana, arial,verdana,helvetica,sans-serif;
     background: #FFF;
     color: #000;
    }
    
    #wrapper { 
     margin: 0 auto;
     margin-top: 10px; margin-bottom: 10px;
     width: 975px;
     border: 1px solid #666666;
     padding: 10px;
     background-color: #FFF;
    }
    
    #topboard {
     width: 728px;
     height: 90px;
     background-color: #990066;
     float: left;
    }
    
    #teaserbox {
    width: 240px; 
    height: 90px; 
    float: right; 
    padding: 0;
    background-color: #747171;
    }
    
    #header {
     width: 975px;
     background: #0066CC;
     margin-top: 8px;
     margin-bottom: 8px;
     float: left;
     height: 120px;
    }
    
    #menunav {
     float: left;
     width: 975px;
     height: 30px;
     background: #000000;
    }
    
    #leftnav {
     float: left;
     color: #000;
     width: 130px;
     background: #FF6600;
    }
    
    #main {
     float: left;
     color: #000;
     padding: 15px;
     width: 500px;
     background: #FF0000;
    }
    
    #rightnav {
     background: #006600;
     color: #333;
     width: 330px;
     float: left;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="topboard"></div><!-- End leaderboard-->
    <div id="teaserbox"></div><!-- End top info-->
    <div id="header"></div><!-- End header-->
    <div id="menunav">
    </div><!-- End top nav-->
    <div id="leftnav">
    </div><!-- End left nav-->
    <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin libero. Morbi lorem. Etiam mattis dolor pellentesque lectus. Vestibulum quis nunc vel massa sollicitudin porta. Duis eu lacus. Quisque aliquam libero a turpis. In hac habitasse platea dictumst. Suspendisse lobortis massa a turpis. Ut velit massa, lobortis ac, lacinia non, facilisis in, urna. Mauris nulla. Aenean condimentum.</p>
    </div><!-- End main content-->
    <div id="rightnav">
    </div><!-- End right nav-->
    </div><!-- End wrapper-->
    </body>
    </html>
    and if you view the code in IE, you will see what I am trying to do. However I have two issues:

    1) It looks strange in FF, don't see why.
    2) The #leftnav, #middle and #main all add up to 975, which is what I want, but it only displays properly if I change my padding in my #main from 15px to 7px even though that's less than 975?

    Can anyone help?

    Thanks

    Chris

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    1) You haven't cleared the floats so the parent container #wrapper has no height at all. See the faq on floats for more information on clearing.

    2) You can't add up

    130 + (15 + 500 + 15) + 330 = 990px not 975px

    Remember that padding is on both sides of the element and so must be included for each side.

    Your html comments are causing a duplicate character bug in IE and you don't really need to comment every single closing div. Correct formatting should do this easily anyway.


    Here is a quick revision but read the faq on floats and clearing first.

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Website</title>
    <style type="text/css">
    /* Start the stylesheet */
    
    * { padding: 0; margin: 0; }
    
    
    body {
     font: normal 11px verdana, arial,verdana,helvetica,sans-serif;
     background: #FFF;
     color: #000;
    }
    
    #wrapper { 
     margin: 0 auto;
     margin-top: 10px; margin-bottom: 10px;
     width: 975px;
     border: 1px solid #666666;
     padding: 10px;
     background-color: #FFF;
     overflow:auto;
    }
    
    #topboard {
     width: 728px;
     height: 90px;
     background-color: #990066;
     float: left;
     margin-bottom: 8px;
    }
    
    #teaserbox {
    width: 240px; 
    height: 90px; 
    float: right; 
    padding: 0;
    background-color: #747171;
    margin-bottom: 8px;
    }
    
    #header {
     width: 975px;
     background: #0066CC;
     margin-bottom: 8px;
     height: 120px;
     clear:both
    }
    
    #menunav {
     width: 975px;
     height: 30px;
     background: #000000;
    clear:both;
    }
    
    #leftnav {
     float: left;
     color: #000;
     width: 130px;
     background: #FF6600;
    }
    
    #main {
     float: left;
     color: #000;
     padding: 15px;
     width: 485px;
     background: #FF0000;
    }
    
    #rightnav {
     background: #006600;
     color: #333;
     width: 330px;
     float: left;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="topboard"></div>
        <div id="teaserbox"></div>
        <div id="header"></div>
        <div id="menunav"> </div>
        <div id="leftnav">hello </div>
        <div id="main">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin libero. Morbi lorem. Etiam mattis dolor pellentesque lectus. Vestibulum quis nunc vel massa sollicitudin porta. Duis eu lacus. Quisque aliquam libero a turpis. In hac habitasse platea dictumst. Suspendisse lobortis massa a turpis. Ut velit massa, lobortis ac, lacinia non, facilisis in, urna. Mauris nulla. Aenean condimentum.</p>
        </div>
        <div id="rightnav"> hello</div>
    </div>
    <!-- End wrapper-->
    </body>
    </html>
    If elements are 100&#37; width then they don't really need to be floated and can be used as clearers to put an end to the floats above and makes the layout more solid. The margins are moved to the floats instead of the header because margins n static content slide under floats.

    overflow:auto was used to make the parent element clear but see the faq on floats for better methods.

    Hope that helps

  3. #3
    SitePoint Evangelist
    Join Date
    Apr 2007
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That helps a lot. How the hell did I get my adding up wrong! doh!!

    Thank you ;-)


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
  •