Take a look at several common CSS two column floating, CSS code see the following categories, 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" > Start I was on the left and back may go to the right </div>
<div id= "B" > Start I was on the right, I could go to the left in the back </div>
</body>
Left Fixed width Right adaptive:
#a {float:left; width:200px; background: #aaa;}
#b {background: #f00;}
When the left width is required and the right side is automatic, only the A object is left floating, and the B object is the width of the entire screen, but because a is left floating and occupies a width of 200PX, B is automatically behind a.
Of course, there is a problem, that is, when the left side of the content is higher than the right side, the height of the right does not increase, and when the right side of the content above the left, the right side of the content will flow to the bottom of the content on the left.
One way to solve this problem is to give B also set a float, of course not set the right float, if it is set to the right float, when the right side of the content is less than the width of the left side of the middle will appear blank:
#a {float:left; width:200px; background: #aaa;}
#b {background: #f00; float:right;}
When you set the left float to B, you can solve the problem of gaps in the middle, but the same is true when the content of the B object is less than the width of the line, the right side will appear blank:
#a {float:left; width:200px; background: #aaa;}
#b {background: #f00; float:left;}
Of course there is another solution, that is to set the B object to the left of the position, so that can achieve the purpose of floating can also resolve the B object too much content and flow into the object below the problem:
#a {float:left; width:200px; background: #aaa;}
#b {background: #f00; margin-left:200px;}
Right-side fixed width left adaptive:
And the left side of the fixed width automatically the same way, the right side of the fixed width of the automatic same can be achieved:
#a {background: #f00; margin-left:200px;}
#b {float:right; width:200px; background: #aaa;}
If you follow the above code, then you will find that this code does not implement the right float, the B object is displayed below the A object, and does not appear as expected to the right of the fixed width left and automatic effect. Because of the HTML structure, the floating div should appear in front of no floating div, that is, if the code above, then <div id= "a" >...</dia> with <div id= "B" >...</dia The order of > should be reversed:
<div id= "B" > Start I was on the right, I could go to the left in the back </div>
<div id= "A" > Start I was on the left and back may go to the right </div>
Of course, you can also use CSS style to adjust the floating order without altering the HTML structure, which is one of the advantages of CSS, that is, you can complete the modification of the page without altering the original HTML structure:
#a {float:left; width:200px; background: #aaa;}
#b {background: #f00; margin-left:200px;}
The above is the CSS layout of the floating 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
