Many solution for this – Try you best.
Simple CSS trick for equal height columns:
Way 1:
Solution:
Two column layout design and you want the height of the sidebar column is equal to the height of the main content column.
The following screenshot problem:
Example: Two columns layout like this:
HTML structure:
<div id="wrapper">
<div id="maincontent">...</div>
<div id="sidebar">...</div>
</div>
CSS:
<style type="text/css">
#wrapper{
margin:0 auto;
width:600px;
}
#maincontent{
border-right:solid 200px #DFDFDF;
position:absolute;
width:400px;
background:#ccc;
}
#sidebar{
background:#DFDFDF;
margin-left:400px;
position:absolute;
width:200px;
}
</style>
Way 2
Jquery trick for equal height box columns:
Problem:
Solution:
Three Box layout design and you want the height of the Box is equal to the height of the parent div box.
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var h = $('#parent_div').height();
$('.child_div').height(h);
});
</script>
HTML:
<div id="parent_div">
<div class="child_div"> BOX1 </div>
<div class="child_div"> BOX2</div>
<div class="child_div">BOX#3</div>
</div>
CSS:
#parent_div{ overflow:hidden; width:100%; }
.child_div{
border:1px solid red;
float:left;
width:28%;
margin:0 1%;
padding:1%;
}
