<Style type = "text/CSS">
# Wrap {
Border : 1px solid blue ;
Margin : 0 auto ;
Overflow : Hidden ;/* The overflow attribute is added here, so you do not need to clear the floatingCodeSo that the parent container can contain the child layer. */
Width : 950px ;/* The width here should also be set, instead of the browser's default adaptive width of 100% */
}
# Content {
Border : 1px solid # c3cfea ;
Float : Left ;
Margin : 10px 0 ;
Overflow : Hidden ;
Padding : 10px 10px 15px ;/* Pay attention to the padding settings here */
Width : 680px ;/* Note that the width here only refers to the width of the content area of the layer. The actual width is 680px + 10px (right fill) + 10px (left fill) + 1px (Right Border) + 1px (left border) = 702 PX ;*/
}
# Sidebar {
Border : 1px solid # ff0000 ;
Color : # Ff0000 ;
Float : Right ;
Margin : 10px 0 ;
Overflow : Hidden ;
Padding : 0 10px 20px ;
Width : 220px ;/* The actual width is 220px + 10px + 10px + 1 + 1 = 242px */
}
</Style>
HTML: < Div ID = "Wrap" >
< Div ID = "Content" >
Content
</ Div >
< Div ID = "Sidebar" >
Sidebar
</ Div >
</ Div >
Note the width setting of the above layers: The condition 242px + 702px = 944px <950px must be met.
As follows:
