Create a three-column page layout with CSS floats_Experience exchange

WBOY

Release： 2016-05-16 12:09:09

Original

1566 people have browsed it

The three-column layout is currently the most common web page layout. The main page content is placed in the middle column, and the two columns on the side are placed with navigation links and other content. The basic layout generally places three columns under the title, and the three columns occupy the entire page width. Finally, a footer is placed at the bottom of the page, and the footer also occupies the entire page width.

Most web designers are familiar with traditional web design techniques that can be used to generate layouts with tables, create fixed-width layouts, or "liquid" (which automatically scales and shrinks based on the width of the user's browser window) web page.

Now that we are all moving away from table-based layout techniques, many web designers are looking to the new paradigm of XHTML markup and CSS formatting for ways to create three-column layouts. It's not difficult to get a fixed-width layout from CSS using absolute positioning; but getting a liquid layout is a bit more difficult. Therefore, this article introduces a method to obtain a three-column liquid layout using CSS float and clear properties.

Basic method
The basic layout contains five divs, namely title, footer and three columns. The header and footer take up the entire width of the page. The left column div and right column div are both fixed width, and the float attribute is used to squeeze them to the left and right sides of the browser window. The center column actually occupies the entire page width, and the content in the center column "flows" between the left and right columns. Since the width of the middle column div is not fixed, it can expand and contract as necessary according to changes in the browser window. The padding properties on the left and right sides of the center column div ensure that the content is arranged in a neat column, even when it stretches to the bottom of the sidebar (left or right column).

An example of a three-column layout
Please take a look at an example of a three-column layout using the techniques introduced in this article. This example uses bright colors to distinguish the various divs of the layout.

The following is the XHTML code:

Header

## # Port side text...

Starboard side text...

Middle column text... #
##

Footer text...

下面是CSS代码：

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;
}