Left middle fixed width, right adaptive:
Because the left side and the middle are fixed width, only the right side is the adaptive width, so this three-column floating is and two columns floating in the left fixed width of the right self-adaptive, the HTML structure code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8″/>
<title>css Floating </title>
<body>
<div id= "A" > I am left </div>
<div id= "B" > I am the middle </div>
<div id= "C" > I'm on the right </div>
</body>
Just make minor changes to the two columns of floating CSS style code:
#a {float:left; width:200px; background: #aaa;}
#b {float:left; width:200px; background: #f00;}
#c {background: #777; margin-left:400px;}
Of course, one thing to remember here is that you must give a left float to the B object.
Left adaptive, middle right width:
The same as the right side of the left middle fixed width, of course, the premise is to put a, B, c three objects in the HTML structure code to change the order, the browser's interpretation order should be c-b-a, because the float before the float:
<body>
<div id= "C" > I am left </div>
<div id= "B" > I am the middle </div>
<div id= "A" > I'm on the right </div>
</body>
The CSS code is as follows:
#a {background: #aaa;}
#b {float:right; width:200px; background: #f00;}
#c {float:right; width:200px; background: #777;}
Left and right sides fixed width, middle adaptive:
This layout should be used the most, because both sides of the width of the sidebar, and then the middle content area adaptive, which is a common layout of many sites. Many people will use four div here to complete the layout, namely:
<body>
<div id= "A" > I am left </div>
<div id= "box" >
<div id= "B" > I am the middle </div>
<div id= "C" > I'm on the right </div>
</div>
</body>
By using a nested div to help complete the three-column float, it is true that the floating layout can be done, but without this nesting you can still complete the three-column float, and since you can omit a nesting, why not omit one? Just change the order of B and C to achieve the goal:
<body>
<div id= "A" > I am left </div>
<div id= "C" > I'm on the right </div>
<div id= "B" > I am the middle </div>
</body>
The CSS code is as follows:
#a {float:left; width:200px; background: #aaa;}
#b {margin-left:200px; margin-right:200px; background: #f00;}
#c {float:right; width:200px; background: #777;}
In this way, the three-column floating layout is completed based on the two-column float.
The above is the CSS layout floating (ii) content, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
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
