1. How to Create a Liquid Three-Column CSS Layout

2. Draw Your Layout No more than 900px wide 20px gutter on the left 10px between columns and rows Common dimensions for columns are 250px, 300px, and 300px wide The top row is 150px tall The bottom row will be 100px tall

3. Write Basic HTML/CSS and Create a Container Element Since this page will be a valid HTML document, you need to start out with an empty HTML container: Untitled Document Then, you add in the basic CSS styles to zero out the page margins, borders, and paddings. While there are other standard CSS styles you would normally add to new documents, these styles are the minimum you need to get a clean layout. Add them to the head of your document:zero out the page margins, borders, and paddingsw documents, these html, body { margin: 0px; padding: 0px; border: 0px; } To start building the layout, you must always put in a “container” element. It sometimes happens that you can get rid of the container, but for most fixed-width layouts, having the container element makes it easier to manage across different Web browsers. So in the body put: And in the CSS style sheet you put: #container { }

4. Style the Container The container defines how wide the Web page contents will be, as well as any margins around the outside and padding on the inside. For this document, you’ll want your container to be 870px wide with a 20 pixel gutter on the left. You can set up the gutter with a margin style. But because you want any elements within this element to be as wide as the container, you will zero out the padding on the container.margin stylehe cont #container { width: 870px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; } If you save your document now, it will be difficult to see your container. Mostly because it has nothing in it. If you add some placeholder text, you'll be able to see your container element more clearly.ou'll be able to

5. Use a Headline Tag for the Header The HTML for your header row goes right at the top of the container and looks like this: My Header Row Then, to set the styles on it, you added a red border on the bottom, so you can see where it ends, zeroed out the margins and padding, set the width to 100% and the height to 150px: #container h1 { margin: 0; padding: 0; width: 100%; height: 150px; float: left; border-bottom: #c00 solid 3px; } Don't forget to float this element with the float: left; property. The key to writing CSS layouts is to float everything - even things that are the same width as the container. That way, you always know where the elements will lay on the page.

6. To Get 3 Columns, Start By Building 2 Columns When you build a 3 column layout with CSS, you need to divide your layout into groups of two. So for this 3 column layout, you’re going to group the middle and right column and place them next to the left column. In other words, first you create a two column layout where the left column is 250px wide, and the right column is 610px wide (300 each for the two columns, plus 10px for the gutter between them). The HTML looks like this: Ut aliquip ex ea commodo consequat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. As you can see, there is an added placeholder text in the columns so that they were more visible when testing. The CSS looks like this: #container #col1 { width: 250px; float: left; } #container #col2outer { width: 610px; float: right; margin: 0; padding: 0; } The column you want on the left (col1) is floated to the left, while the other is floated to the right. Because the total width of both columns is 860px, there will be a 10px gutter between them, and you don't have to worry about margins!

7. Add 2 Columns Inside the Wide Second Column To create the 3 columns, add two divs inside the wider second column, just like you added 2 divs inside the container column in the last step. The HTML looks like this: Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo. Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenetur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. And the CSS looks like this: #col2outer #col2mid { width: 300px; float: left; } #col2outer #col2side { width: 300px; float: right; } Since these two 300px wide boxes are inside a 610px wide box, there will again be a 10px gutter between them.

8. Add in the Footer Now that you’ve got the rest of the page styled, you can add in the footer. You can just use a last div with a "footer" id, and add content so that you can see it. You can also added a border on the top, so you'll know where it starts. The HTML: Copyright © 2012 The CSS: #container #footer { float: left; width: 870px; border-top: #c00 solid 3px; }

9. Add in Your Personal Styles and Content Now that you've got the layout finished, you can start adding in your own personal styles and content. Remember that the borders on the header and footer were added to show the layout sections, not specifically for design. Keep in mind that all the placeholder text used in the tutorial is called “lorem ipsum” which is a made up language for designers to use as placement text. Have fun making your own CSS designs!