CSS: How to make left float div to adjust height dynamically? [duplicate]
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:1p开发者_如何学Pythonx 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>
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
A List Apart has a few excellent article on this subject, for example Faux Columns and Multi-column layouts climb out of the box
There are a number of options listed here
http://www.ejeliot.com/blog/61
Generally, I think you might want to ask yourself if you really want two columns. It could be that you're better off with your static content in the parent div and your dynamic content in a child div ([Edit] or vice versa).
try out following code, I tried with firefox but hope it would work on most of all browsers
<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;
}
.parent_new {
border:1px solid red;
width:530px;
padding:5px;
display: table-cell;
}
.row_level
{
display:table-cell;
}
.cell-level {
display:table-cell;
border:1px solid red;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
display:table-row;
}
.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_new">
<div class="row_level">
<div class="cell-level">float left div here only static content
</div>
<div class="cell-level">
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>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论