Web page Making learning: Creating three-column page layouts with CSS

css| Create | Web page

The three-column layout is currently the most common page layout, the main page content in the middle of the column, the edge of the two columns to place navigation links and so on. The basic layout is usually placed under the title of three columns, three columns occupy the width of the entire page, and finally in the bottom of the page to place a footer, the footer also occupies the entire width of the page.

Most web designers are familiar with traditional Web page design techniques that can be used to generate Web pages with tables, a fixed-width layout, or "liquid" (which automatically scales according to the width of the user's browser window).

Now that we're all starting to discard the table based layout technology, many web designers are looking for ways to create three-column layouts from the new paradigm of XHTML markup and CSS formatting. It is not difficult to get a fixed-width layout from CSS using the absolute positioning method, but it is difficult to get a liquid layout. Therefore, this article describes a method of using the float and clear properties of CSS to obtain a three column liquid layout.

Basic methods

The basic layout consists of five Div, title, footer, and three columns. The title and footer occupy the entire page width. The left column Div and the right column div are fixed-width and use the float property to squeeze them to the left and right side of the browser window. The middle column actually occupies the entire page width, and the contents of the column "flow" between the left and right columns. Because the width of the middle-column div is not fixed, it can be scaled as necessary depending on the browser window's changes. The padding (padding) property on the left and right side of the column div guarantees that the content is arranged in a neat column, even when it stretches to the bottom of the sidebar (left or right).

An example of a three-column layout

Take a look at the three-column layout with the techniques described in this article. This example uses vivid colors to differentiate the various div layouts. The following is the XHTML code:

Header

Port Side Text ...

Starboard Side Text ...

Middle Column Text ...

Footer text ...

Here is the CSS code:

Body {
margin:0px;
padding:0px;
}
Div#header {
Clear:both;
height:50px;
Background-color:aqua;
padding:1px;
}
Div#left {
Float:left;
width:150px;
background-color:red;
}
Div#right {
Float:right;
width:150px;
Background-color:green;
}
Div#middle {
padding:0px 160px 5px 160px;
margin:0px;
Background-color:silver;
}
Div#footer {
Clear:both;
Background-color:yellow;
}

Code description

The order in which parts of the HTML code appear is very important. The left and right column Div must appear before the columns in the column. This allows the two sidebar to float to their position (on both sides of the screen) and let the contents of the middle column "flow" into the space between them. If the browser finds the middle bar before one or two sidebar div, the middle column will occupy the side or sides of the screen, so that the floating part runs below the middle column instead of the middle column.

The Clear:both declaration in Div#header and Div#footer styles (style) is used to ensure that the floating part does not occupy the space of the header and footer. The padding:1px declaration in the Div#header style is used to eliminate the exception edges in the header background color, and if the padding is set to zero, this exception is seen in Netscape browsers.

The Float:left declaration in the Div#left style is used to squeeze the left column to the left. width:150px is used to set the fixed width of the column, but you can also set its width to a different value. Similarly, the Float:right declaration in the Div#right style is used to squeeze the right column div to the right. In this example, float squeezes the left and right columns completely into the left and right edges of the browser window. However, if the div is contained by other Div, float will squeeze them to the edge of the div that contains them.

In the Div#middle style, clear affirms that the contents of the middle column are allowed to "flow" between the two sidebar. The padding:0px 160px 5px 160px Declaration is set to fill the left and right columns, allowing 150 pixel widths of column div, plus 10 pixel spacing.

This example is very rough and simple, but it is a good demonstration of the basic technique of using floating div to create a sidebar with a three-column liquid layout.