CSS solve the problem of high monospaced

Some time ago in order to solve the problem front-end layout, a lot of research, and ultimately get. Here are ways.
The first (percentage of the width on both sides):

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 三列自适应等高且中列宽度自适应 </ title >
< style type ="text/css" >
body { background : url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes) ; }
* { margin : 0 ; padding : 0 ; }
.iefix_main { float : right ; font-size : 0 ; position : relative ; }
.wrapper { overflow : hidden ; }
.shadow_l { width : 10% ; float : left ; background : url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y right ; }
.shadow_r { width : 10% ; float : right ; background : url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y left ; }
.main { background : #fff ; _float : left ; /* ie6 hack */ overflow : hidden ; }
.autoheightfix { margin-bottom : -10000px ; padding-bottom : 10000px ; }
</ style >
</ head >
< body >
< div class ="wrapper" >
< div class ="shadow_l autoheightfix" > &nbsp; </ div >
< div class ="shadow_r autoheightfix" > &nbsp; </ div >
< div class ="main autoheightfix" > Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center0 < br />
< span class ="iefix_main" > &nbsp; </ span > <!-- for ie6（当然也可for ie7) -->
</ div >
</ div >
</ body >
</ html >

The second (intermediate percentage):

View Code

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" /></ head >
< head >
< title > 三列自适应等高且中列宽度自适应 </ title >
< style type ="text/css" >
body { background : url(http://bbs.blueidea.com/attachment.php?aid=162970&k=8a588529fdf6c7cf15d202d23dfba661&t=1304927794&noupdate=yes) ; }
* { margin : 0 ; padding : 0 ; }
.iefix_main { float : right ; font-size : 0 ; position : relative ; }
.wrapper { overflow : hidden ; width : 80% ; margin : 0 auto ; }
.shadow_l { width : 15px ; float : left ; background : url(http://bbs.blueidea.com/attachment.php?aid=162380&k=983ba7d17320e4c3401cac8722cfed70&t=1304927794&noupdate=yes) repeat-y left ; }
.shadow_r { width : 15px ; float : right ; background : url(http://bbs.blueidea.com/attachment.php?aid=162381&k=02b10b1f06bcb79d22e71bf1468f79fe&t=1304927794&noupdate=yes) repeat-y right ; }
.main { background : #fff ; _float : left ; overflow : hidden ; }
.autoheightfix { margin-bottom : -10000px ; padding-bottom : 10000px ; }
</ style >
< body >
< div class ="wrapper" >
< div class ="shadow_l autoheightfix" > &nbsp; </ div >
< div class ="shadow_r autoheightfix" > &nbsp; </ div >
< div class ="main autoheightfix" > Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center < br />
Center0 < br />
< span class ="iefix_main" > &nbsp; </ span > <!-- for ie6（当然也可for ie7) -->
</ div >
</ div >
</ body >
</ html >

The third (div nested mode)

View Code

<! DOCTYPE HTML >
< html >
< head >
< meta charset ="utf-8" >
< title > 无标题文档 </ title >
< style >
* { margin : 0 ; padding : 0 ; }
body { background : url(http://bbs.blueidea.com/attachment.php?aid=162970&k=e046eec9c0fd552333d3f20aa4da545c&t=1305009100&nothumb=yes) repeat 0 0 ; }
.main { width : 80% ; margin : 0 auto ; *position : relative ; *left : 7px ; }
.main .content { background : #CDFEBC ; }
.main .left { background : url(http://bbs.blueidea.com/attachment.php?aid=162380&k=94f0ce1168340d77454085413483885a&t=1305009100&nothumb=yes) repeat-y 0 0 ; left : -7px ; position : relative ; width : 100% ; padding-left : 7px ; }
.main .right { background : url(http://bbs.blueidea.com/attachment.php?aid=162381&k=b6548aad1d26c1f6530cb4a2ffee23a1&t=1305009100&nothumb=yes) repeat-y 100% 0 ; width : 100% ; padding-right : 7px ; }
</ style >
</ head >
< body >
< div class ="main" >
< div class ="left" >
< div class ="right" >
< div class = "Content" > < P > primary content </ P > < P > primary content </ P > < P > primary content </ P > < P > primary content </ P > < P > primary contents region </ P > < P > primary content </ P > </ div > </ div > </ div > </div></










body >
</ html >

Reproduced in: https: //www.cnblogs.com/public/archive/2011/05/15/2047072.html