Create a Multi-column and Float-based Layout

This tutorial will teach you to create a multi-column and float-based layout. This tutorial will allow you to create a multi-column liquid designs as well as fixed-width design.

Structuring HTML

Firstly, you need to create a CSS-based layout by identifying different series of layout elements on the page. You can conduct this by wrapping chunks of HTML inside of <div> tags, each of which will represent a different part of the page.

1. Open start.html file in a text editor, click the empty line following HTML comment: Before any style is to be created, you need to add the structure and content for the page. Next you need to add the <div> tag for the left sidebar.
2. Add an opening <div> for the sidebar: <div id= “sidebar”>. Then press Enter (Return) to create a new, empty line. If you are creating a web page from the beginning, you need to add the HTML for the page’s sidebar, a list of articles on the site, links to other related web sites etc. The HTML portion is already looked after. The code for an unordered list of links awaits you in another file. You just have to copy and paste it into this page.
3. Open the file sidebar.txt, copy all of the contents, and then return to the start.html file. Paste the HTML after the <div> tag you had created in step 2. The HTML for the sidebar is almost complete. You just need to close the <div> tag.
4. Just after the code you pasted, type </div> You have just added the first few layout elements on the page. When you style these HTML elements, they will look like a column. But first you need to add some more content to it.
5. Place cursor in empty line after HTML comment: <!-main content goes here–> and then type <div id= “main”> This div holds the main content of the page. However, you will get HTML element from another file, too.
6. Open the file story.txt, copy all contents, return to the start.html file and paste the code after <div> tag you created. Add the closing </div> tag you just created. Add the closing </div> tag exactly as in step4 That is all HTML you need to create and design.

Now we will conduct another tutorial on CSS:

Creating Layout Styles

If you view the page now, you will find banners, navigation buttons and texts are already styled.

We will create styles to format the page’s columns:

1. In text editor, click on empty space directly before closing </head> tag near the top of the file. Type <style type= “text/css”> and then hit on Enter (Return) This code becomes the opening tag for an internal style sheet. Once you complete creating styles in internal style sheet, you can create and style your sheet even better. Now you move the styles to external style sheet

2. Add a style for sidebar element

#sidebar {
    float: left;
    width: 160px;
    margin-top: 10px;
}

This class style makes the div float to the left side of the page, imparting a width of 160 pixels and add a bit of space to separate the sidebar from the banner. The width property is very essential in this style. Unless you don’t float an image that has a specific set width, you should always set a width for the floated elements. Otherwise, the browser also sets a width based solely on the content inside the float, leading to inconsistent results.

3. Press Enter (Return) type </style> to complete the internal style sheet and preview the page in web browser The sidebar also forms a left-hand column. Therefore, when text in the main column reaches the bottom of sidebar, it wraps around the bottom of the sidebar. While that is the way that floats work, here you need to make the main body text appear like a column on its own, you have to add enough of left margin to indent the main text beyond the right edge of the sidebar.

4. Create a style for second column

#main {
    margin-left: 180px;
}

Since the sidebar is 160 pixels wide, a margin of 180 pixels indents the main content an additional 20 pixels, creating a difference between two columns. This extra white space not only makes the text easier to read but also imparts a wonderful look and feel to the page.

Adding Another Column

While a two column is quite an easy task, a three column imparts a whole new world of information to the visitors.

Here are the steps:

1. You need to open the file secondary.txt. Copy all HTML from that file and return to start.html file. However, the HTML for this extra column goes between the page’s two divs
2. Click just after the closing <div> for the sidebar element (right before the HTML comment <!-main content goes here–>). Press Enter (Return) to create an empty line. It often becomes quite hard to find the right closing </div> when you have already used a lot of divs to structure a page. That’s why HTML comments truly help you identify and keep track of HTML in your page
3. Type <div id= “secondary”>, press Enter (return) and then paste HTML that you had copied in Step1. Hit enter (return) again and type </div>. When you close the <div> tag finally, you have completed HTML for the page’s third column. Start styling it next.
4. Below the #main style you created in step4, you need to add a new style to the internal style sheet.

#secondary {
    float: right;
    width: 180px;
}

You need to float the column to the right side of the page to flank main content with sidebars on either side. The same problem might persist - where the main content wraps underneath the new sidebar. To fix it, however, you need to add a right margin to the #main style.

5. Edit the #main style t make it look like the following:

main {
    margin-left: 180px;
    margin-right: 200px;
}

Now the page becomes a full 3-column layout. You need to test the page in the web browser. When you need to resize the windows, you will find that the entire page resizes and adjusts to fit the window.

Note: In this design, you will find the right and left sidebars contain a fixed width, so even when you make the browser window much larger, they still retain the same size. You can make those columns change the width as well, simply by setting their widths to percentage values and changing the #main style’s left and right margin to percentages as well.

Popularity: 100% [?]

Categories: CSS Tutorials, Posted on May 15, 2008 by Choppr | Login