The three-column layout is currently the most common web page layout. The main page content is placed in the middle column, and the navigation links and other content are placed in the two columns on the edge. The basic layout is generally to place three columns under the title, the 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 technologies, which can generate tables, create a fixed-width layout, or "liquid" (it can be automatically scaled based on the user's browser window width) the layout of the web page.
Now, we have all begun to abandon the table-based layout technology. Many network designers are looking for ways to create a three-column layout from the new example of XHTML markup and CSS format. Absolute Positioning
It is not difficult to get a fixed-width layout from CSS, but it is difficult to get a liquid layout. Therefore, this article describes how to use the float and clear attributes of CSS to obtain the three-column liquid layout.
Method.
Basic Method
The basic layout contains five Divs, namely the title, footer, and three columns. The title and footer occupy the entire page width. The left column div and right column div are both fixed-width and use the float attribute to squeeze them
Press it to the left and right of the browser window. The middle column actually occupies the entire page width, and the content in the middle column is "Flowing" between the left and right columns ". Because the width of the middle column div is not fixed, it can be based on the browser window
To make necessary scaling. The padding attribute on the left and right of the column div ensures that the content is arranged in a neat column, even when it is stretched to the bottom of the sidebar (left or right)
Yes.
An example of three-column layout
Take a look at the three-column layout example using the technology described in this article. This example uses bright colors to differentiate the layout of each div. The following is the XHTML code:
Html
<Body>
<Div id = "header">
<H1> Header </Div>
<Div id = "left">
Port side text
</Div>
<Div id = "right">
Starboard side text
</Div>
<Div id = "middle">
Middle column text
</Div>
<Div id = "footer">
Footer text
</Div>
</Body>
The following is the CSS code:
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;
}
Code Description
The order of each part in HTML code is very important. The left column and right column div must appear before the middle column. In this way, the two sidebar can be moved to their positions (on both sides of the screen), and
The content will "stream" into the space between them. If the browser finds a middle column before one or two sidebar Divs, the middle column occupies one or both sides of the screen, so that the floating part will run to the bottom of the middle column.
Area instead of the middle column.
The clear: both statement in div # header and div # footer style (style) is used to ensure that the floating part does not occupy the space of the title and footer.
The padding: 1px statement in the div # header style is used to remove abnormal edges in the background color of the page header. If the padding is set to zero
This exception is displayed.
The float: left statement in the div # left style is used to squeeze the left column to the left. Width: 150px declaration is used to set the fixed width of the column, but you can also set its
Set the width to other values. Similarly, the float: right statement in the div # right style is used to squeeze the right div to the right. In this example, float finishes the left and right columns
Squeeze to the left and right sides of the browser window. However, if these divs are contained by other Divs, float will squeeze them to the edge of the divs that contain them.
In the div # middle style, clear declares that the content in the column is "Flowing" between two sidebar. Padding: 0px 160px 5px 160px declares that the padding to the left and right columns is set, so that a column div with a width of 150 pixels can be added with a 10-pixel padding.
This example is very rough and simple, but it demonstrates the basic technology of using a floating div to create a three-column liquid layout.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
