Home  >  Article  >  Web Front-end  >  CSS layout with fixed width on the left and adaptive width on the right_Experience exchange

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

WBOY
WBOYOriginal
2016-05-16 12:04:421237browse

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

[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn