Grow your CSS skills. Land your dream job.

More efficient way of coding this layout

  • # April 23, 2013 at 10:06 pm

    Is there a more efficient way to code this? I want everything to be able to scale up to the max size. Here is a link to codepen: http://cdpn.io/xJmsD

    #container {
    width:90%;
    max-width:960px;
    margin 0 auto 0 auto;
    background-color:yellow;
    height:100%;
    }
    #nav {
    float:right;
    margin-right:10px;
    }
    #nav li {
    list-style:none;
    display:inline;
    margin-left:15px;
    }
    #nav li a {
    text-decoration:none;
    color:black;
    }
    #logo {
    float:left;
    margin-left:10px;
    margin-top:10px;
    }
    #banner {
    clear:both;
    width:100%;
    background-color:green;
    height:200px;
    }
    #pages {
    width:100%;
    height:600px;
    }
    #lineone {
    width:100%;
    height:300px;
    }
    #linetwo {
    width:100%;
    height:300px;
    }
    #one {
    float:left;
    width:40%;
    background-color:#4F340B;
    height:300px;
    }
    #two {
    float:left;
    width:35%;
    background-color:#855A1A;
    height:300px;
    }
    #three {
    float:left;
    width:25%;
    background-color:#A67E41;
    height:300px;
    }
    #four {
    float:left;
    width:25%;
    background-color:#846E51;
    height:300px;
    }
    #five {
    float:left;
    width:40%;
    background-color:#B55811;
    height:300px;
    }
    #six {
    float:left;
    width:35%;
    background-color:#DDB83F;
    height:300px;
    }
    #footer {
    clear:both;
    width:100%;
    background-color:black;
    height:120px;

    < !End Navigation!>

    < !End Banner!>

    < !End Pages!>

    < !End Footer!>

    < !End Container!>

    # April 24, 2013 at 6:01 am

    I’ve stripped out a lot of repeated CSS into classes and generally tidied up a bit and switched out some divs for HTML5 elements such as `header`, `nav` & `footer`

    http://codepen.io/Paulie-D/pen/cGfoD

    You have a **lot** of IDs in there. They aren’t really necessary for **every** element unless you are actually planning on styling them individually.

    You don’t need to state `width:100%` on divs…that is their default size.

    Finally, you mentioned that you want this to scale up to the max size but you have listed a max-width of 960px. That’s fine if that is the maximum size you want to support…otherwise you can lose.

    Naturally, you might want to consider media queries when scaling down.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".