css| Solution | adaptive
The problem of adaptive height, using div + CSS for three columns or two column layout, do not know the specific height, can only be based on the content of the increase and decrease adaptive height, to make two columns (or three columns) of the same height, with a Table is easy to achieve, but the use of Div + CSS appears to be more trouble. According to the general practice, most of the use of background map fill or JS script method to make the height of the same, but these are not the best way, I think ...
Here's how to combine "Hide container overflow" with "in-patch" and "negative outer patches"
Main code:
#wrap {Overflow:hidden}/* Outer container * *
#sidebar_left, #sidebar_right {padding-bottom:100000px;margin-bottom:-100000px}/* Column/*
Complete example code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>div + CSS Example, wayhome ' s blog</title>
<style type= "Text/css" >
<!--
#wrap {Overflow:hidden;}
#sidebar_left, #sidebar_right {padding-bottom:100000px;margin-bottom:-100000px;}
-->
</style>
<body>
<div id= "wrap" style= "width:300px; Background: #FFFF00; " >
<div id= "Sidebar_left" style= "float:left;width:100px; Background: #FF0000; " >Left</div>
<div id= "Sidebar_mid" style= "float:left;width:100px; Background: #666; " >
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
Middle<br/>
</div>
<div id= "Sidebar_right" style= "float:right;width:100px; Background: #0000FF; " >Right</div>
</div>
</body>