I saw this problem today.
Two different ways to achieve a two-column layout, where the left part width fixed, the right part width with the browser width changes and adaptive changes
I feel there are several ways to summarize the following:
First, using the Position:absolute method, because the element is set to absolute, that element is out of the document flow, the following elements will occupy his original position:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title></Head><styletype= "Text/css">. Side{width:190px;Height:80px;Background-color:#F00; position:absolute; }. Exta{Height:80px;Background-color:#0f0; margin-left:190px; } </style><Body> <Divclass= "PD" > <Divclass= "side">Side</Div> <Divclass= "Exta">Exta</Div> </Div></Body></HTML>
Ii. use of the float method
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title></Head><styletype= "Text/css">. Side{width:190px;Height:80px;Background-color:#F00;float :left; }. Exta{Height:80px;Background-color:#0f0; }// Cannot add float:left, otherwise its width will narrow with the content, not with the browser changes </style><Body> <Divclass= "PD"> <Divclass= "side">Side</Div> <Divclass= "Exta">Exta</Div> </Div></Body></HTML>
Summary of Setup methods for two-column layouts
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
