Menu
How can I make my floated left div with a static content to adjust automatically its height to the same height of the right floated div with a dynamic content?
So what I am trying to accomplish is that the both left and right div will have the same height (left div adjusting automatically to the right div's height)
Below is the sample code.
Thanks in advance :)
Cheers, Mark
<html>
<head>
<style type="text/css">
body {
font-family:verdana;
font-size:12px;
}
.parent {
border:1px solid red;
width:530px;
/*min-height:100%;*/
padding:5px;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.right {
border:1px solid green;
width:300px;
float:right;
position: relative;
padding:3px;
}
.clr { clear:both; }
.footer {
border:1px solid orange;
position: relative;
padding:3px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">float left div here only static content</div>
<div class="right">
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
</div>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
605
Here is the working CSS solution (thanks to pdr for the link):
<html>
<head>
<style type="text/css">
html, body {
font-family:verdana;
font-size:12px;
}
.parent {
border:1px solid red;
width:530px;
padding:5px;
overflow:hidden;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.right {
border:1px solid green;
width:300px;
float:right;
position: relative;
padding:3px;
}
/* a solution but doesn't work in IE */
/*
.left, .right {
min-height: 100px;
height: auto;
}
*/
.left, .right {
padding-bottom:8000px;
margin-bottom:-8000px;
background:none repeat scroll 0 0 lightblue;
}
.clr { clear:both; }
.footer {
border:1px solid orange;
position: relative;
padding:3px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">float left div here only static content</div>
<div class="right">
float right div dynamic content here<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
</div>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
If I were you, I use a simple CSS trick. I'd assign the height for .Left and .Right in a css class like this
.Left, .Right
{
min-height: 200px; /*because of .Left*/
height: auto;
}
note that the above code uses whenever your height goes more than 200px then it will override the 200px value.
hope this help
Complete answer with Javascript
<script>
function increaseHeight()
{
Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height;
}
</script>
and you have to call it whenever youfinished increasing size of right div
36
A List Apart has a few excellent article on this subject, for example Faux Columns and Multi-column layouts climb out of the box
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
