Working principle
#wrapper必须触发hasLayout, or sometimes inside the content will float strange, I directly with float, can be used in other ways. In fact, if only to do this example to the effect of even #wrapper can not.
#left定义100% width and take advantage of margin:0 0 0-200px put the left block on the left side 200px, then use the #innerleft margin:0 0 0 200px put the content out again,
#right只是简单的浮动, #innerRight米多大作用, just habitually retained, in addition to allowing our control to be simpler, but also for the next change in the layout can keep the structure unchanged.
In addition to fixed to the right can also be fixed to the left, free friends can try
There is a problem
- IE7 the following version of IE browser without min-width, pull too small will be difficult to see. Next article to solve
Extended Functionality
- If you want to left and right two columns of equal height can refer to this: solve the column height adaptive (column height is the same) five ways
- Can also play: fixed the width of the column, left and right two columns of equal width and adaptive
- You can also extend this function: Minimum height 100%, footer remains at the bottom of the layout method
<! 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 with adaptive width layout-Beautiful style« 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 content= "All" name= "robots" /> <link rel= "Start" href= "http://www.loaoao.com" title= "Home"/> <style type= "text/css" > body{font-fa Mily: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:00 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> <p> fixed right column width, The left column first appears with the adaptive width of the layout </p> <p> working principle </p> <p> #wrapper必须触发hasLayout, or sometimes the inside The content will float strange, I directly with float, can be used in other ways. In fact, if only to do this example to the effect of even #wrapper can not. #left定义100% width and take advantage of margin:0 0 0-200px put the left block on the left side 200px, then use the #innerleft margin:0 0 0 200px again the content, #right只是简单的浮动, #innerRight米多大作用, just habitually retained, in addition to make our control easier, but also for the next change in layout can keep the structure unchanged. </p> <p> In addition to fixed to the right can also be fixed to the left, free friends can try </p> <p> there is a problem </p> <ul> <li>ie7 the following version of IE browser without min-width, pull too small will be difficult to see. Next article re-resolve </li> </ul> <p> extensions </p> <ul> <li> If you want to left and right two columns of equal height can refer to this: solve the column height adaptive (column height same) Five ways </li> <Li> can also play: fixed the width of the column, left and right two columns of equal width and adaptive </li> <li> can also extend such functionality: Minimum height 100%, footer remains at the bottom of the layout method </li > </ul> <p> This is just a simple example that I hope will help a friend who is a beginner of CSS layout. </p> <p> Basic also has a lot of functions can be written in, afraid to write too messy, or wait for the next one, good cheat point traffic. </p> <p>copyright©2006 Aoao, Some rights Reserved .</p> </body> &L T;/html>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
