CODEWITHSUNDEEP
csslayouthtml
bassneck
bassneck

Reputation: 4043

Centered fixed-width layout with fullscreen-width backgrounds

I'm trying to code a layout somewhat similar to SO.

It has a centered container with typical blocks: header, navigation, content area and footer. This blocks have different background-color. The problem is, I want the background to be 100% of the screen width. You can see this in SO's userbar at the top of the screen.

Also I made an example picture. Note, that there shouldn't be any vertical borders, they're just to show the content area.

enter image description here

I've checked SO's html source but it didn't tell me anything

So, what are my options? My first idea was to make a wrapper div for each section which handles the background, and another content div inside of it with width:950px and margin:0 auto But it seems to me very inefficient.

Is there a nicer way to make it?

Upvotes: 0

Views: 2604

Answers (2)

bassneck
bassneck

Reputation: 4043

I've ended up with this structure:

<body>
    <div id="header">
        <div id="logo-container" class="wrap">
            <div>...</div>
        </div>
        <div id="navigation" class="wrap">
            <div>...</div>
        </div>
    </div>
    ...
<body>

and the style looks like

#... {
    background:#...
}

.wrap div {
    width:950px;
    margin:0 auto;
}

Thanks everyone.

Upvotes: 1

Shauna
Shauna

Reputation: 9596

What I do in cases like that is style the html or body with the main background color (the one for your content), then keep the header and footer out of the main wrapper and size down their contents as needed, so I'd end up with something like so (which I think is similar to what you're saying you did, but with a couple minor differences):

<body style="background: #000;">
    <div id="header" style="width: 100%; background: #666;">
      <div id="nav" style="width: 100%; background: #999;">
        <ul class="navigation" style="width: 950px; margin: 0 auto;">
        </ul>
      </div>
    </div>
    <div id="contentWrap" style="width: 950px; margin: 0 auto;">
      Whatever content stuff, other divs, etc.
    </div>
    <div id="footer" style="width: 100%; background: #999;">
    </div>
</body>

You don't really need extra wrappers if you have only a couple block level elements in your header and footer, so you end up with about the same number of divs as if you had them all in one wrapper. You can also keep their sizes in sync if you put them in one CSS call with the size. It might sacrifice a little bit in the way of CSS efficiency, but in my experience, it's a small enough trade off that it's not worth losing sleep over, since either the site is small enough that it doesn't matter, or large enough that there are better efficiency increases in places like the images, javascript, and server-side code.

Upvotes: 0

Related Questions