How can this problem be solved? We found that we can use overflow to solve this problem! Add the following code to the parent element:
| Overflow: auto; zoom: 1; |
"Overflow: auto;" is to make the height adaptive, "zoom: 1;" is to be compatible with IE6, you can also use "height: 1%;" to solve the problem.
| The code is as follows: | Copy code |
| <! 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> <Title> float issues </title> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <Style type = "text/css"> * {Padding: 0; margin: 0 ;} Body {font-size: 12px; line-height: 150% ;} Ul {list-style: none ;} . Container {width: 700px; margin: 0 auto ;} . Header,. footer {height: 60px; background: #99CC66; margin-bottom: 6px; font-size: 18px; font-weight: bold ;} . Main {} . Left {float: left; width: 200px ;} . Sidepanel {border: 1px solid # CC6600; margin-bottom: 8px ;} . Sidepanel h2 {font-size: 12px; background: # CC6600; height: 24px; line-height: 24px; text-indent: 20px; color: # fff ;} . City {padding: 6px 0px; overflow: auto; zoom: 1 ;} . City li {float: left; width: 35px; text-align: center ;} . Right {margin-left: 200px; background: # CCCC66; height: 240px ;} . Hotinfo {padding: 6px ;} . Clearfloat {clear: both; height: 0; font-size: 1px; line-height: 0px ;} </Style> </Head> <Body> <Div class = "container"> <Div class = "header"> header </div> <Div class = "main"> <Div class = "left"> <Div class = "sidepanel"> <H2> City navigation <Ul class = "city"> <Li> Beijing </li> <Li> Shanghai </li> <Li> Tianjin </li> <Li> Nanjing </li> <Li> Guangzhou </li> <Li> Chongqing </li> <Li> Jinan </li> <Li> Hangzhou </li> <Li> Zhengzhou </li> <Li> Beijing </li> <Li> Shanghai </li> <Li> Tianjin </li> <Li> Nanjing </li> <Li> Guangzhou </li> <Li> Chongqing </li> <Li> Jinan </li> <Li> Hangzhou </li> <Li> Zhengzhou </li> </Ul> </Div> <Div class = "sidepanel"> <H2> popular articles <Ul class = "hotinfo"> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> <font color = "#43FF73"> fingerprints </font> </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> <Li> fingerprint required for entry into Japan from January 1, 20th day of this month </li> </Ul> </Div> </Div> <Div class = "right"> content on the right </div> </Div> <Br class = "clearfloat"> <! -- Used to clear floating elements --> <Div class = "footer"> footer </div> </Div> </Body> </Html> |
|
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
