Working principle
#wrapper必须触发hasLayout, or sometimes the contents of the inside will float strange, I directly with float, can be in other ways. In fact, if only to achieve this example to the effect of even #wrapper can not.
#left定义100% width and use margin:0 0 0-200px the left block on the left 200px, then use the #innerleft margin:0 0 0 200px to get the content out,
#right只是简单的浮动, #innerRight米多大作用, only habitually retained, in addition to making our control simpler, can also change the layout for the next time to keep the structure unchanged.
In addition to fixed to the right can also be fixed to the left, the free friends can try
There are problems
- IE7 the following version of IE browser without min-width, pull too small will be difficult to see. The next article will be solved
Extended Functionality
- You can refer to this if you want to have two columns and so on: Five ways to resolve column height adaptation (column height is the same)
- Can also play: fixed the width of the column, the width of the left and right columns are equal and adaptive
- You can also extend this feature: minimum height 100%, the layout method of keeping the footer at the bottom
<! 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> <title> Fixed right column width, left column content first appears at the same time adaptive width of the layout-beautiful style«-like -style beauty»loaoao.com </title> <meta http-equiv= "Content-type content=" text/html; Charset=utf-8 "/> <meta name= KEYWords" content= "Fixed,css,xhtml,effect"/> <meta name= "DEscription" content= "Fixed right column width, left column content first appears at the same time adaptive width"/> <meta name= "Author" content= "Aoao"/> <meta "All" content= "robots" /> <link rel= "Start" href= "http://www.loaoao.com" title= "Home"/> <style type= "text/css" > body{F Ont-family:verdana, Arial, Helvetica, Sans-serif; min-width:620px; margin:0; padding:0; } #wrapper {float:left; Display:inline; margin:0 30px; Background-color: #ccc; } #header, #footer {clear:both; padding:10px; Text-align:center; } #left {Float:lefT width:100%; margin:0 0 0-200px; } #innerLeft {margin:0 0 0 200px; Background-color: #efefef; } #right {float:left; width:200px; Background-color: #ddd; }. inner {padding:2px 12px; p{Line-height:1.6em} </style> </pead> <body> <div id= "wrapper" > <div id= "Header" > <p> Fixed right column width, left column content first appears at the same time adaptive width layout </p> </div> <div id= "left" > <div id= "innerleft" class= "Inner" > <p> working principle </p> <p> #wrapper必须触发hasLayout, or sometimes the contents will float strange, I directly with float, can In other ways. In fact, if only to achieve this example to the effect of even #wrapper can not. #left定义100% width and use margin:0 0 0-200px the left block on the left 200px, then use the #innerleft margin:0 0 0 200px and then the content, #right只是简单的浮动, #innerRight米多大作用, but habitually retained, in addition to make our control more simple, but also for the next change the layout can keep the structure unchanged. </p> <p> In addition to fixed to the right can also be fixed to the left, the free friends can try </p> <p> existing problems </p> <ul> <li>ie7 the following version of IE browser without min-width, pull too small will be difficult to see. Next articleRe-solve </li> </ul> <p> extended functionality </p> <ul> <LI&G T; You can refer to this if you want to go to the left and right two columns: Five ways to resolve column height adaptation (column height same) </li> <li> can also play: Fixed medium column width, right and left two column width equal and adaptive </li> <li> can also extend this feature: Minimum height 100%, footer at bottom of layout method </li> </ul> </div> & lt;/div> <div id= "right" > <div id= "innerright" class= "inner" > <p> this is just a simple example, want to beginners CSS layout Friends to help. </p> <p> Basically there are a lot of features can be written in, afraid to write too messy, or wait for the next one, good point of deception traffic. </p> </div> </div> <div id= "Footer" > <p>copyright©2006 aoao, Some Rig HTS Reserved .</p> </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
