Grow your CSS skills. Land your dream job.

Wrapper div confusion

  • # November 7, 2012 at 5:17 pm

    HI, I have a slight problem here. My (.wrapper) div is set to 90% width, shouldn’t background colour I have set to it extend only inside the (.wrapper) div instead of all the body? It seems that the content is rendering right, and it is centered with 90% width.

    Here’s the code:

    .wrapper {
    background: #224466;
    width: 90%;
    margin: 5% auto;
    border-radius: 6px solid red;
    list-style: none;
    }

    header {
    width: 100%;
    margin: 0 auto;
    }

    #search {
    float: right;
    }

    #user_widgets {
    text-align: right;
    }

    .origin_cards_text {
    width: 100%;
    float: right;
    text-align: center;
    }

    nav {
    text-align: center;
    }
    .global {
    float: right;
    margin: 1em auto 1em auto;
    width: 100%;
    text-align: center;
    }

    .global ul {
    float: right;
    padding-right: 10%;
    }

    .global ul li {
    float: left;
    list-style: none;
    }

    .global li a {
    display: block;
    padding: 8px 5px 8px 5px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    text-justify: newspaper;
    }

    .global li a:hover {
    color: #c00;
    background-color: #fff;
    }

    .maincontent {
    background: #123456;
    float: right;
    width: 70%;
    }

    .local_nav {
    background: #BADA55;
    width: 20%;
    margin: 0 auto;
    float: left;
    list-style: none;
    } ul li {
    list-style-type: none;
    }

    footer {
    margin: 0 auto;
    width: 100%;
    background: #BADA55;
    }

    And the HTML:

    PQuis auctor ridiculus enim porta tincidunt egestas elementum, lectus platea, et odio ac sed egestas dolor a mattis elit arcu.
    Eros turpis nec rhoncus quis mid mid augue! Montes a, diam et, tincidunt, et velit ultricies, dignissim enim ac
    purus adipiscing cras! Velit amet egestas aliquet elementum dignissim sociis mid a est, est sit ut cum eu, pellentesque.
    A ridiculus cras sed? Sed ac? Aliquet? Duis mattis augue tincidunt ut, nec porta mus diam! Porta porttitor porttitor,
    in? Pellentesque in egestas massa ultricies sed sit sociis mauris ac mus sociis ac natoque odio massa lorem turpis
    risus integer mid! Magna et quis phasellus cum? Sociis nunc? Scelerisque elementum quis ac penatibus mus! Sed
    tincidunt? Elit pulvinar rhoncus! Etiam et, dictumst.

    < ?php
    include(“footer.php”);
    ?>

    # November 7, 2012 at 5:32 pm

    I don’t see the use of `wrapper` in the above HTML anywhere, if you could post a screenshot or a link to your site as its extremely hard to debug code without something to look at.

    # November 7, 2012 at 5:39 pm

    Sorry, just posted the whole thing. Cheers

    # November 7, 2012 at 6:21 pm

    Sorted , thank you

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

You must be logged in to reply to this topic.

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