：
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Body{padding:0;margin:0;} *{box-sizing:Border-box;}. Side-left{width:200px;Min-height:500px;background:Red;float: Left;padding:10px;Margin-right:-100%;position:relative;}. Side-right{width:200px;Min-height:500px;background:Yellow;float: Left;padding:10px;Margin-left:-200px;position:relative;}. Main{width:100%;float: Left;}. Main-inner{Min-height:500px;background:Blue;margin:0 200px;padding:10px;} </style></Head><Body> <Divclass= "Side-left">Left column</Div> <Divclass= "Main"> <Divclass= "Main-inner">Main content</Div> </Div> <Divclass= "Side-right">Right column</Div></Body></HTML>
This is a method of using negative margins
The main content requires a 2-level div
1, outer width 100%, left floating
2, the inner layer to a minimum height, left and right to empty 200px need to give a margin:0 200px
Left column width 200px, height 500px
1, left floating
2, in order to allow the main content to float on its right, need to give a margin-right:-100%
3, to a relative positioning, or the contents of the left column is not clicked.
Right column width 200px, height 500px
1, left floating
2, in order to float in the main content to the right, need to give a margin-left:-200px
3, to a relative positioning, or the right column of the contents of the click.
Note: If the main content also gives relative positioning, then you need to use Z-index to adjust their hierarchical relationship.
Also, if you need content first, put main in front of side
<Body> <Divclass= "Main"> <Divclass= "Main-inner">Main content</Div> </Div> <Divclass= "Side-left">Left column</Div> <Divclass= "Side-right">Right column</Div></Body>
To adjust CSS styles:
. side-left{width:200px;min-height:500px;background:red;float:left;padding:10px;margin-left:-100%;p Osition: relative;}Actually just changed margin-right to Margin-left, because the adjusted HTML structure Side-left on the right side of main, and main is 100% wide, give a margin-left:-100%, you can make it run to the left of the window.
Two-sided sidebar fixed-width master content Adaptive
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
