The three-column layout is the current most common webline layout. The main page is placed in the middle column, and the two columns on the side places the contents of the navigation link. The basic layout is generally under the title, the three columns occupy the width of the entire page, and finally placed the footer on the bottom of the page, the footer also occupies the entire page width.
Most web designers are familiar with traditional web design technologies, using these technologies to generate a table, create a fixed width layout or "liquid" (it can be automatically extended according to the user browser window width automatically) layout.
Now, we have begun to abandon the table-based layout technology, and many network designers are looking for a way to create a three-column layout from the new paradigm of XHTML tags and CSS formats. The layout of the fixed width from the CSS is not difficult to obtain a fixed width in the CSS; but the liquid layout is a bit difficult. Therefore, this paper introduces a method of obtaining a three-column liquid layout with a CSS FLOAT and CLEAR attribute.
basic method
The basic layout contains five DIVs, namely headings, footers, and three columns. The title and footer occupy the entire page. The left column DIV and right column DIV are fixed widths and are squeezed to the left and right of the browser window with the float attribute. The Chinese bar actually occupies the entire page wide, the contents of the middle bar are "flowing" between the left and right columns. Since the width of the neutral DIV is not fixed, it can make the necessary telescopic according to the change in the browser window. The Padding attribute on the left and right side of the Zhongba DIV ensures that the content is arranged in a neat bar, even when it stretches the bottom of the side (left column or right bar).
An example of a three-column layout
Please see the example of the three column layout in this article. This example uses a bright color to distinguish the layout of each DIV. The following is XHTML code:
The order in each part in the HTML code is very important. The left column and right bar DIV must appear before the middle column. This will allow these two side bars to float into their position (on both sides on the screen) and let the contents of the middle column will "stream" into the space between them. If the browser finds the middle bar before one or two sidebar DIVs, the neutral bar will occupy the side or on the side of the screen, so that the floating part will run to the middle bar instead of the neutral bar. Clear in Div # Header and Div # Footer Style: Both declares that this floating part will not occupy the space of the title and footer. The Padding: 1px in the Div # HEADER style is used to eliminate the abnormal edges in the colors of the page header. If the Padding is set to zero, then this exception will be seen in the Netscape browser.
Float: Left in the Div # Left style is used to squeeze the left column to the left. Width: 150px stated that the fixed width of the column is set, but you can also set it to other specific values. Similarly, Float: Right declares in the Div # Right style is used to squeeze the Right Bar DIV to the right. In this example, Float extrudes the left column and the right column to the left edge and right edge of the browser window. However, if these DIVs are included in other DIVs, Float will squeeze them to the edges of the DIV.
In the Div # Middle style, the Clear stated that the content "flowing" in the middle column is between the two sidebar. Padding: 0px 160px 5px 160px stated that set it to the fill of the left column and the right column, which allows the 150 pixel width bar div, plus 10 pixels.
This example is very rough and simple, but it is a good demonstration of the basic technology of the three column liquid layout with floating DIV.
