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. It is not difficult to obtain a fixed-width layout from CSS using the absolute positioning method, but it is difficult to obtain a liquid layout. Therefore, this article describes how to use the float and clear attributes of CSS to obtain the three-column liquid layout.
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 div and right div are fixed in width, and they are squashed to the left and right sides of the browser window by using the float attribute. The middle column actually occupies the entire page width, and the content in the middle column is "Flowing" between the left and right columns ". The width of the div in the middle column is not fixed, so it can be scaled according to the browser window changes. 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.
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:
<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:
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;
}
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
