CSS layout with fixed width on the left and adaptive width on the right_Experience exchange

An expert in BI specifically discussed this layout method, but he used more hacks and avoided IE6's dtd. In actual use, I found that avoiding the dtd definition of IE6 will cause the ajax modal box to be unable to be centered (a VS control, automatically generated code, is difficult to modify). So I wrote a simple layout with two columns on the left and right. No hacks were used. It was very simple, just for practice.

css code: both left and right stick to the left side. Set left above right (z-index); add a content layer (content) inside right; set content to 200px from the left side of right, which is exactly equal to the width of left.

Copy code The code is 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

<meta http-equiv="Content-Type" content="text/html; 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:#ffc; } </style> <div class="wrapper"> <div class="left">Fixed width 200px on the left side</div> <div class="right"> <div class="content"> Right width automatically adapts </div> </div> </div>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]