Grow your CSS skills. Land your dream job.

How to get 100% width but in one portion of bg

  • # March 26, 2013 at 9:21 am

    Hello I would like to know I have part html and part php code but would like to know how to make this as 100% width width because at the moment when I do it it only stays in the container 980px wide

    div id=”content-top”
    < ?php foreach ($modules as $module) { ?>
    < ?php echo $module; ?>
    < ?php } ?>

    #content-top {
    background: #000;
    width: 100%;
    height: 390px;
    }

    # March 26, 2013 at 9:28 am

    Take it out of the container.

    Divs are 100% width of the browser window **unless** they are in other elements that restrict their size. In which case they are automatically 100% width of the containing element.

    If you are going to have a divs that will be full browser width **but** you still want the content contained (presumably because your want a full width bar or something) then you have to get out of the mindset that “everything is in a single container”.

    It’s just not going to work.

    The ideal solution is to set up, in effect, rows of sections for the various levels of your page. If you need to have some content inside a defined width then you have to add ‘inner’ divs/containers which have that set width.

    Here is a very basic example: http://codepen.io/Paulie-D/pen/oGKtA

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".