There are experts on bi that specialize in this layout approach, but he uses more hack and avoids the IE6 DTD. In practice, I find that avoiding the IE6 DTD definition will cause the Ajax modal box to be centered (vs. a control that automatically generates code that is difficult to modify). So I wrote a simple layout of the left and right two columns, useless to what hack, very simple, just practicing use.
CSS code: Left and right are stuck to the left-hand side. Set left on right (Z-index), Nega layer of content on right (content), and setting the content distance from right to 200px, which happens to be equal to the width of leave.
Copy Code code as follows:
* {margin:0; padding:0; list-style:none;}
. wrapper {width:100%}
. Left {width:200px;background: #fcc; position:absolute; left:0; Z-index:1}
. Right {width:100%;background: #ccc; position:absolute;left:0}
. Content {margin-left:200px;background: #ffc;}
Complete code
<textarea id="runcode70763"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <title></title> <style type=" Text/css "> * {margin:0; padding:0; list-style:none ; }. Wrapper {width:100%} . left {width:200px; background: #fcc; position:absolute; left:0; Z-index:1}. Right {width:100%; background: #ccc; position:absolute; left:0}. Content {margin-left:200px; background: #ff C </style> </pead> <body> <div class= "wrapper" > <div class= "Left" > Fixed width 200px</div& Gt <div class= "Right" > <div class= "Content" > right-hand width automatic adaptation </div> </div> </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
