CSS multiple div floating float height adaptive two methods

CSS multiple div float side-by, height adaptive (self-increment)

When using div + CSS for a three-column or two-column layout, it's easy to make the two columns (or three columns) the same height, but using a div + CSS makes it more cumbersome. As a general rule, most of the methods used to fill or JS script with background map are of the same height.

Method One: Pure CSS solution ("Hide container Overflow" and "positive patch" and "negative external patch" combined method):

<style type= "Text/css" ><!--#wrap {overflow:hidden;} #sidebar_left, #sidebar_right {padding-bottom:100000px;margin-bottom:-100000px;} --></style><div id= "wrap" style= "width:300px; Background: #FFFF00; " >    <div id= "Sidebar_left" style= "float:left;width:100px; height:1000px; 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; height:500px; background: #0000FF;" >Right</div></div>

Method Two: JS solution (thinking, this method is not recommended):

<script>var A=math.max (document.getElementById ("left"). OffsetHeight,  document.getElementById ("center"). Offsetheight,document.getelementbyid ("right"). offsetheight); Gets the maximum height of the 3 div document.getElementById ("left"). Style.height = a + "px";d Ocument.getelementbyid ("center"). Style.height = a + "px";d Ocument.getelementbyid ("right"). Style.height = a + "px"; </script>