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;).
The content itself should be centred and is common in all strips – lets say 700px wide in each section. To keep the content this wide we create a .inner class in the css stylesheet:
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.
Found this post useful? Why not buy me a coffee!
Ryan Kelly says:
Well, you could always take the ‘inner’ DIVs out and instead set the width of the header and footer paragraphs, then set the content DIV to the width you need (assuming that in your diagram the content section does not need a background or can use the body background).
I can’t think, off the top of my head, of any rendering issues this could cause.
Comment made on November 16, 2008 at 2:41 am
Mike Jolley says:
With that shown on the diagram, yes your correct; you could set the width of the paragraphs. But as soon as you get more advanced content the inner divs really help matters.
This site for instance has many strips because of all of the background images; I think I have 4 (header, nav, content, footer).
Comment made on November 16, 2008 at 12:37 pm
2.0 myspace layouts mediation says:
This+is+what+i+was+searhcing+for+so+many+months.
Comment made on February 26, 2009 at 9:48 pm
Asif Shabbir says:
Their is good habit to use Div instead of using tables. Also it is easy to understand code. Thanks for posting it.
Comment made on May 7, 2009 at 12:00 pm
Ashfame says:
Thanks for the article! I have tried such a layout earlier but didn’t end well. Now I know how to proceed.
Comment made on June 7, 2009 at 5:46 pm
Richard Sheppard says:
I think I’ve used some of the wacky ways you mentioned. Was never happy with them – this is so simple, clear and effective. Thanks!
Comment made on July 29, 2009 at 8:14 pm
abhijeet says:
does it work with wordpress????????
Comment made on October 29, 2009 at 7:47 am
Dorset Web Design Company says:
Nice, simple and well put. A lot of people really over complicate their css and html. You just need to think simply – although it takes the benefit of experience before this “clicks”. It took me a few years of coding before I realised I was putting way too many divs and slices in.
Can you make a few more simple cutups like for 3 column, 2 column etc for your readers that might be useful
Comment made on November 5, 2009 at 11:58 am
Mostyn Web Solutions says:
Thanks for the article, nice approach.
Slightly random question but is it an issue that this approach will cause multiple http requests for the different background images? Is there any way css slicing could be used for this approach? ie downloading 1 image and specifying what parts of that image are going to be used for each background?
Comment made on January 11, 2010 at 10:50 pm