Creating ‘Web 2.0′ Layouts using strips

I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Essentially, what you do is treat each section, or ‘strip’, separately and layer them like a cake.

Lets take a commonly used design and demonstrate what I mean.

In the above design as you can see we have a header, a content (with two sub sections), and a footer. The footer and header require a full width background. So, horizontally we can see 3 strips – header, content, footer.

1
2
3
4
5
6

<div id="header"><p>Header</p></div>
<div id="content">
    <div class="mainContent"><p>Main Content</p></div>
    <div class="subContent"><p>Sub Content</p></div>
</div>
<div id="footer"><p>Footer</p></div>

Using CSS we can style each strip, leaving them all as full width elements. Header and footer should get a tiled background image each, and the text should be aligned center (text-align:center;).

1
2
3
4
5
6

.inner {
    width:700px;     /* Limits its width */
    margin:0 auto;   /* Makes this inner div centered */
    text-align:left;    /* Parent strips have center aligned text */
    overflow:hidden; /* To clear floats */
}

Our HTML now looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="header">
    <div class="inner">
        <p>Header</p>
    </div>
</div>
<div id="content">
    <div class="inner">
        <div class="mainContent"><p>Main Content</p></div>
        <div class="subContent"><p>Sub Content</p></div>
    </div>
</div>
<div id="footer">
    <div class="inner">
        <p>Footer</p>
    </div>
</div>

See how it works? Each strip can have its own background this way, and can shrink and grow to fit it’s content without breaking the layout.

As I said before, this is my preferred method of coding these kind of layouts and it has not failed me yet. I hope you found this useful.