A premise of two-column fixed-width layout is that the two-column box model width addition cannot be greater than the parent element's width, otherwise you know ... Misplaced.
To test the HTML page:
<Body> <DivID= "header">Head</Div> <DivID= "Container"> <Divclass= "Mainbox">Main content Area</Div> <Divclass= "Sidebox">Side bar</Div> </Div> <DivID= "Footer">Bottom information</Div></Body>
Related styles:
* {margin:0;padding:0; }#header, #footer{width:960px;Height:30px;Border:1px solid Red; }#container{width:960px;Height:250px;margin:10px 0; }. Mainbox{float: Left;width:680px;Height:250px;Color:#FFFFFF;Background-color:#333333; }. Sidebox{float: Right;width:270px;Height:250px;Color:#FFFFFF;Background-color:#999999; }
We can find that the implementation of the two-column-width, just a part of the two parts of the left float, part of the right float. The above code we can find a problem, if the content added in Mainbox or Sidebox is beyond the height set by the element, the content will overflow, at this time my solution is to set him as a highly adaptive style, and then clear the float for footer. Is the following style:
* {margin:0;padding:0; }#header, #footer{width:960px;Height:30px;Border:1px solid Red; }#container{width:960px;/*height:250px;*/margin:10px 0; }. Mainbox{float: Left;width:680px;/*height:250px;*/Color:#FFFFFF;Background-color:#333333; }. Sidebox{float: Right;width:270px;/*height:250px;*/Color:#FFFFFF;Background-color:#999999; }/*this way of clearing the float will make the margin between container and footer disappear.*/#footer{Clear:both; }
In this case, it becomes a highly adaptive version, and the height will change due to the filling of his content. It is also written in the above note that adding clear floats on the footer will cause the interval between container and footer to disappear, so there are the following improvements:
/ *#footer { clear:both ; } */ {display: block; Visibility: hidden; font-size: 0; line-height: 0; Clear: both; content: ""; }My understanding is that a after pseudo element is created, the display is identified as a box, not visible, the padding content is empty, and a clear float is added on this pseudo element.
CSS small white, just beginning to learn CSS, so the wrong please point out ... Although it's not very likely that anyone will see
Two-column fixed-width layout
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
