<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Style type = "text/CSS">
*{
Margin: 0px;
Padding: 0px;
}
# Top-right {
/* Margin-Right:-3px ;*/
Width: 60px;
Height: 30px;
Border: 20px solid # f3c3f3;
Padding: 40px;
Background-color: # Eee;
Float: left;
}
# Top-left {
Width: 60px;
Height: 30px;
Border: 20px solid # f3c3f3;
Padding: 40px;
Background-color: # Eee;
}
# Content {
Width: 120px;
Border: 40px solid # f3c3f3;
Padding: 80px;
}
</Style>
</Head>
<Body>
<Div id = "Top-Right"> AAA </div>
<Div id = "top-left"> AAA </div>
<Div id = "content"> BBB </div>
</Body>
</Html>
Open the webpage document in the IE browser and find that the Left and Right Div blocks are not closely adjacent, but there is a 3px gap in the middle, removing the comment statement in CSS, the problem is solved.
Add the following statement to CSS:
Body {
Width: 360px;
Margin: 0px auto;
}
The two columns can be automatically centered without the browser size change.
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
