The following is 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 0px 160px;
Margin: 0px;
Background-color: Silver;
}
Div # footer {
Clear: both;
Background-color: yellow;
}
The following is the XHTML code:
<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>
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 in the column will be "streaming" 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 below the middle column rather than next to 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 declaration in the DIV # Header style is used to remove the abnormal edge in the background color of the page header. If the padding is set to zero, this exception is displayed in the Netscape Browser.
The float: Left statement in the DIV # Left style is used to squeeze the left column to the left. Width: The 150px declaration is used to set the fixed width of the column, but you can also set its width to other specific 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 completely compresses the left and right columns 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 0px 160px declares that the padding to the left and right columns is set, so that the DIV of the 150-pixel-width column 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
