Three-column layout is the most common page layout, the main page content in the middle column, the side 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 put the footer at the bottom of the page, the footer also occupies the entire page width.
Most web designers are familiar with traditional web design techniques that can be used to generate Web pages with tables, create fixed-width layouts, or "liquid" (which can automatically scale according to the width of the user's browser window).
Now that we're all starting to abandon table-based layout techniques, many web designers are looking for a way to create a three-column layout from the new paradigm of XHTML markup and CSS formatting. It is not difficult to get a fixed-width layout from CSS using absolute positioning, but it is difficult to get a liquid layout. Therefore, this article introduces a method of using CSS's float and clear properties to obtain a three-column liquid layout.
Basic methods
The basic layout contains five Div, which is the title, footer, and three columns. The title and footer occupy the entire page width. The left column Div and right column div are all fixed widths, and the float property is used to squeeze them to the left and right side of the browser window. The column actually occupies the entire page width, the contents of the column in the left and right between the two columns "flow". Because the width of the column div is not fixed, it can be scaled as necessary to change the browser window. 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 examples of three-column layouts using the techniques described in this article. This example uses vivid colors to differentiate the layout of each div.
Here's 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;
}
