Flexible CSS layout, 3 columns

Nekkidblogger CSS-designs

Flexible 3 column CSS layout

This CSS layout is designed to be extremely flexible. It has a max-width of 1010px, but is designed to degrade gracefully in more narrow viewports.

You can test the design by making your browser window wider and narrower.

As the viewport gets narrower, the ad to the right in the header falls down under the header and the rightmost sidebar falls down under the middle sidebar. If the viewport gets even narrower, both sidebars fall down under the content.

This is achieved by using "min-width" and "max-width" extensively in the layout elements.

Markup and CSS

You can see the markup and CSS by viewing the source code. The CSS is sorted into groups and should be easy to read.

Use of this design

Feel free to use this design on your own pages. If you do, please acknowledge the effort by saying that the design is "by Nekkidblogger" or "based on a design by Nekkidblogger". We need backlinks to get ahead in the search engines! Also, a modest donation would be very much appreciated!

Get source and support

You can also send me $99 using Paypal (above right) along with an email (peter (at) nekkidblogger.com), and I will send you zipped HTML and CSS files and give you up to 2 hours of support in using and styling the layout.