Home > Developer > Web Develop
Here 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 0px 160px;
margin:0px;
Background-color:silver;
}
Div#footer {
Clear:both;
Background-color:yellow;
}
Here's the XHTML 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>
Code description
The order in which the parts appear in the HTML code is very important. The left column and right column Div must appear before the middle column. This allows the two sidebar to float to their location (on both sides of the screen) and let the contents of the middle column "flow" into the space between them. If the browser finds the middle column before one or two sidebar div, the middle column will occupy the side or sides of the screen, so the floating part will run to the bottom of the middle column instead of the middle column.
The Clear:both declaration in the Div#header and Div#footer styles (style) is used to ensure that this floating part does not occupy the space of the header and footer. The padding:1px declaration in the Div#header style is used to eliminate the exception edges in the header background color, and if the padding is set to zero, you will see this exception in the Netscape browser.
The Float:left declaration in the Div#left style is used to squeeze the left column to the left. The width:150px declaration is used to set the fixed width of the bar, but you can also set its width to other specific values. Similarly, the Float:right declaration in the Div#right style is used to squeeze the right column div to the right. In this example, float squeezes the left and right columns completely to the left and right edges of the browser window. However, if the div is contained by another Div, then float will squeeze them to the edge of the div that contains them.
In the Div#middle style, the clear declaration allows the contents of the middle column to "flow" between two sidebar. padding:0px 160px 0px 160px The declaration sets the padding to the left and right columns, allowing a 150-pixel width of the column Div, plus 10 pixels of spacing.
This example is very coarse and simple, but it is a good demonstration of the basic technique of creating a sidebar with a floating div to create a three-column liquid layout.
This article is from the "No Water Fish" blog, please be sure to keep this source http://javaqun.blog.51cto.com/10687700/1704170
Make three columns liquid layout with CSS
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
