In previous articles I have outlined how to center a design using auto margins and negative margins, How To Create a 2 Column Layout Using Floats, and also the Holy Grail of CSS the 3 Column Layout.

For the CSS Beginner and even for the more experienced, liquid layouts can sometimes be confusing. In this article I will explain the pros and cons and also show you how to create a 3 Column Liquid Layout Using CSS. Let’s get a few definitions out of the way first. Let me just explain what a Liquid Layout really is and then we can get your toes wet and create a Layout of our own.

What is a Liquid Layout?

In a Liquid Layout the Sites dimensions are set using percentages instead of pixels and therefore allows the site to scale in relation to the size of the browser window. So as the browser window gets bigger the sites columns get wider and when the browser window gets smaller the columns will reduce their width. Sounds pretty good, but there are a few drawbacks, for example when the browser window get to small the line lengths can become ridiculously narrow and vice versa, if the site expands to the full width of the browser window the line lengths become far to long and end up being very difficult to read. But we can use the min-width and max-width properties to combat that.

How Do We Do It?

Let’s turn a 3 column fixed width design into a liquid 3 columns design. To start I have given the WRAPPER Div a width of 85%. Meaning that it is 85% of the overall size of the browser window. You will find that 85% is a good starting point and produces some good results. The next part will take a bit of playing around with I ended up setting the Navigation Area to 23% and the Content to 75%.

#wrapper { width: 85%; margin:0 auto; }
#MainNav{ width: 23%; float:left;}
#content{ width: 75%; float:right; }

Inside the Content are I want 2 more columns. So we need to set the widths on those as well. This is where it starts to get a bit tricky and confusing so bare with me. The width of these 2 content divs will be based on the width of the Main Content Div. So if we want the Secondary Content Div to be the same width as the navigation div we then have to work out what 23 percent of the wrapper is in terms of the width of the content area. To do this we need to divide 75 by 23 (width of the content div and nav div) and multiply that by 100. Giving us about 31%. To keep things nice and neat I want to keep the gutter between the content columns the same as the gutter between the nav and content areas on the other side. About 3% Therefore the width of the Main Content area will be 66%.

#mainContent{ width: 66%; float:left; }
#SecondaryContent{ width: 31%; float:right; }

This method will produce a Great Liquid Layout that is optimal at 1024X768 but will easily be read at smaller and larger screen resolutions. You can view it here.

Make Sure You Join Everyone Else and SIGN UP for my Web Design Tips Newsletter and receive more great tips on how to improve you website.

Social Media:

| del.icio.us | Digg it | Furl | reddit | StumbleUpon | Yahoo MyWeb

You can follow any responses to this entry through the RSS feed. You can leave a response, or trackback from your own site.