Loading ...CSS Tutorial | The Three Column Layout With Flexible Width
1 April 2008 - 23:56
For designers the three column layout is one of the most complicated, yet most requested designs. It generally consists of a header, a left side bar, a content column, a right sidebar, and a footer. The key to understanding how to create this layout is in understanding how to design with floats. This tutorial won’t go into every concept, but if you follow along you will get an understanding for how to create a simple three column, flexible layout using floats.
For those of you who simply want to download the complete files. You can get them here:
Flexible, Three Column Layout Template HTML
Flexible, Three Column Layout Template CSS
To get started building we’ll first build the basic HTML page.
<html>
<head>
<title>Three Column Layout</title>
</head>
<body>
</body>
</html>
So far, this is just like any other HTML page. It has a head element with a title, and a body. Next we’ll want to link this page to a style sheet. We’ve called our style sheet style_sheet.css. To link to the style sheet we use the link tag:
<link href="style_sheet.css" rel="stylesheet" type="text/css" />
Notice that the link tag targets the style sheet (style_sheet.css). The “rel” attribute defines the file as a style sheet, and the “type” attribute has a value of “text/css”.
We place the complete tag in our HTML page just under the title tag in the head of the document.
<html>
<head><title>Three Column Layout</title>
<link href="style_sheet.css" rel="stylesheet" type="text/css" /></head>
<body>
</body>
</html>
Next we’ll add some div tags to give the page structure. Working like divs is like working within little boxes. Some boxes contain content and some simply contain more divs. Essentially the goal is to use CSS to organize the boxes on the page in a way that helps you achieve the layout you would like. To get started well need to first create the boxes we’ll use to organize the page. These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer.
The code looks something like this:
<html> <head> <title>Three Column Layout</title> <link href="style_sheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <h1>The Header</h1> </div> <div id="wrapper"> <div id="content"> <h3>Your Content</h3> <p>this is your paragraph content</p> <p>this is your paragraph content</p> </div> <div id="left-sidebar"> <h3>Sidebar Nav</h3> <ul> <li>nav link 1</li> <li>nav link 2</li> <li>nav link 3</li> </ul> </div> </div> <div id="right-sidebar"> <h3>right sidebar</h3> <ul><li>nav link 1</li> <li>nav link 2</li> <li>nav link 3</li> </ul> </div> <div id="footer"> <h3>Footer</h3> </div> </div> </body> </html>
Now that we have the divs in place lets take a look at what we want to do with our CSS. The following diagram is an illustration of how each div will fit together on the page and also which way we need to tell the content to float.
Looking back at the HTML you’ll notice that each div has an ID that pertains to the boxes on the illustration. These IDs are essential to the identification of each div with our CSS. What we’ll do next is create our style sheet and write a style rule for each of the IDs, floating the content right and left, assigning widths and even background color.
First lets create the style sheet. Open a plain text editor and save the file as “style_sheet.css”. Looking at the code you’ll notice that this is the name of the file you linked to in your HTML. Now, lets create our first rule.
body { font: .8em verdana, arial, sans-serif; }
So far so good. What we’ve done here is set a default page font. It is made up of the “body” selector, and the font property/value pair. Next we’ll add styles for container.
#container { min-width: 660px; max-width: 880px; }
For this code, we set a min-width of 660px and a max width of 880px. Next we’ll want to style the header.
#header { background: #cff; }
Since I want you to be able to see the header and know where to put any additional property/value pairs I added a background color.
Next we’ll style the wrapper. If you look at the diagram above you’ll notice that it floats left, and to get it to fit in the appropriate space we’ll make it 70% of the total width. That will make some room for the third column. The code looks like this:
#wrapper { float: left; width:70%; }
Next we style the main content. We want it to float to the right, and have a width of 60% of the wrapper div. Remember, this div takes it’s width from the total available width of the wrapper container, which is 70% of the page container. So the code looks like this:
#content { float: right; width: 60%; }
Next let’s add code for the left and right side bars. We’ll go ahead and give them a background color as well.
#left-sidebar { float: left; width: 30%; background:#f90; } #right-sidebar { float: right; width: 30%; background:#c00; }
You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.
#footer { clear:both; Background: #cff; }
Notice that the footer has one additional property/vlaue pair. That is the “clear” property. What this does is ensure that the footer doesn’t bounce up and down above any of the divs before it in the HTML code.
Finally, when you put all the code together you get this:
#left-sidebar { float: left; width: 30%; background:#f90; } #right-sidebar { float: right; width: 30%; background:#c00; }
You’ll notice that the left sidebar floats left and the right sidebar floats right. The last bit of code we need to add is for the footer.
body { font: .8em verdana, arial, sans-serif; } #container { min-width: 660px; max-width: 880px; } #header { Background: #cff; } #wrapper { float: left; width:70%; } #content { float: right; width: 60%; } #left-sidebar { float: left; width: 30%; background:#f90; } #right-sidebar { float: right; width: 30%; background:#c00; } #footer { clear:both; Background: #cff; }
Feel free to copy and paste the HTML and CSS for your own stuff.
Enjoy!
Cole
8 Comments | Tags: CSS
02 Apr 2008 - 22:52
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
03 Apr 2008 - 19:17
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
05 Apr 2008 - 19:36
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
06 Apr 2008 - 20:26
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
09 Apr 2008 - 22:44
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and Visa Credit Card finally the footer. The code looks something like this: … […]
11 Apr 2008 - 0:29
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
12 Apr 2008 - 1:40
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and finally the footer. The code looks something like this: … […]
13 Apr 2008 - 20:13
[…] http://thedesignjunkie.com/2008/04/01/css-tutorial-the-three-column-layout-with-flexible-width/These boxes including a container, which houses the page, then a header, then a main content wrapper, then the content, the left sidebar, and the right sidebar, and Gold Credit Card finally the footer. The code looks something like this: … […]