<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <style>Header{Height:100px;background:#454;}Footer{Height:100px;background:#666;}#content{Clear:both;}#content: after{content:"020";Display:Block;Height:0;Clear:both;Visibility:Hidden;'}. Sub,.main,.extra{Height:500px;float: Left;}. Sub{width:190px;background:Red;Margin-left:-100%}. Main{width:100%;background:Green;}. Main-inner{margin:0px 320px 0px 290px;}. Extra{width:220px;background:Blue;Margin-left:-220px;} </style></Head><Body> <DivID= "page"> <Header></Header> <DivID= "Content"> <Divclass= "Main"> <Divclass= "Main-inner">I'm a B.</Div> </Div> <Divclass= "Sub">I'm a.</Div> <Divclass= "Extra">I'm c.</Div> </Div> <Footer></Footer> </Div></Body></HTML>
The famous two-wing layout: The sub and extra area fixed width The main area appears in the middle and changes with the window size automatically, the basic idea is to let three boxes float to the left, while the sub box left "move" distance "100%", So the sub will overlap on the main box and close to the left edge of the parent element, extra also do the same, but only to the left "move" 230px, so that the extra will be placed on the right edge of the parent element, Main-inner again with the appropriate left and right margin to achieve. This layout ensures that the main content appears in front of the document.
Dual Wing layout