The three-column layout is currently the most common page layout, the main page content in the middle of the column, the edge of the two columns to place navigation links and so on. The basic layout is usually placed under the title of three columns, three columns occupy the width of the entire page, and finally in the bottom of the page to place a footer, the footer also occupies the entire width of the page.
Most web designers are familiar with traditional Web page design techniques that can be used to generate Web pages with tables, a fixed-width layout, or "liquid" (which automatically scales according to the width of the user's browser window).
Now that we're all starting to discard the table based layout technology, many web designers are looking for ways to create three-column layouts from the new paradigm of XHTML markup and CSS formatting. It is not difficult to get a fixed-width layout from CSS using the absolute positioning method, but it is difficult to get a liquid layout. Therefore, this article describes a method of using the float and clear properties of CSS to obtain a three column liquid layout.
Basic methods
The basic layout consists of five Div, title, footer, and three columns. The title and footer occupy the entire page width. The left column Div and the right column div are fixed-width and use the float property to squeeze them to the left and right side of the browser window. The middle column actually occupies the entire page width, and the contents of the column "flow" between the left and right columns. Because the width of the middle-column div is not fixed, it can be scaled as necessary depending on the browser window's changes. The padding (padding) property on the left and right side of the column div guarantees that the content is arranged in a neat column, even when it stretches to the bottom of the sidebar (left or right).
An example of a three-column layout
Take a look at the three-column layout with the techniques described in this article.
This example uses vivid colors to differentiate the various div layouts.
XHTML code:
Example Source Code
<body>
<div id= "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>
here is the CSS code :
Example Source 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
