Question

I’ve put all my main content in a div to constrain the size of all the elements. I guess many popular site follow this approach. However, I wanted to extend the background of my navigation bar to extend 100% to the ends of the window. I’ve also seen this done on popular site like CNN.com for example (i.e. the red navigation bar and header extend 100% while all the content is constrained and the navigation bar and header still align with the rest of the constrained content) Below is a screen shot. How would I duplicate that?

#allcontent {
    width: 900px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

It’s pretty simple, you just have one div that’s 100% width, with a background, and another div inside it that is centered with a fixed width or max-width. Example:

<div id="allcontent">
    <div class="content">
        <p>Your content here.</p>
    </div>
</div>

#allcontent {
    background:#CCC;
}
.content {
    width:900px;
    margin:0 auto;
}

Here’s a demo, with a header and footer: http://jsfiddle.net/Qq6nM/2/

Hope I took your meaning correctly, I’ve never heard of a “jello” layout before…

Note: If your whole layout is already constrained to a certain width by a parent element, you will have trouble getting this to work for just one child element. You may have to rework your layout.