First HTML is as follows:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"/> <styletype= "Text/css">
body{
Background-color: #eee;
}
#wrap{width:600px;margin:50px Auto;Background-color:#eee;Overflow:Hidden; /*in order to produce BFC*/ }#left{width:273px;float: Left;padding:10px;Background-color: White; }#right{width:273px;float: Right;padding:10px;Background-color:#ccc; } </style> </Head> <Body> <DivID= "Wrap"> <DivID= "Left">I'm on the left, I'm a little shorter than the right. I'm on the left, I'm a little shorter than the right. I'm on the left, I'm a little shorter than the right.</Div> <DivID= "Right">I'm on the right, I'm a bit longer than the left. I'm on the right, I'm a bit longer than the left. I'm on the right, I'm a bit longer than the left. I'm on the right, I'm a bit longer than the left. I'm on the right, I'm a bit longer than the left. I'm on the right, I'm a bit longer than the left.</Div> </Div> </Body></HTML>
The effect is as follows:
So, how do you make these two columns as high?
1. Negative margins<styletype= "Text/css">Body{Background-color:#eee; }#wrap{width:600px;margin:50px Auto;Background-color:#eee;Overflow:Hidden; /*in order to produce BFC*/ }#left{width:273px;float: Left;padding:10px;Background-color: White;Padding-bottom:9999px; /* Overflow:hiddenwith Div, achieve equal height*/Margin-bottom:-9999px; }#right{width:273px;float: Right;padding:10px;Background-color:#ccc; } </style>
The effect is as follows:
Achieve two columns of equal height
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
