neojohan
11 Sep 2009, 04:15 AM
[font="Arial"]When using float: left or right in Child divs, make sure to add position: relative to them. And add overflow: hidden in their Parent div. The Parent div will inherit the height of his Child divs. The code below will show you want I mean.
<style type="text/css">
.body {
background-color: #000;
height: auto;
position: relative;
overflow: hidden;
width: 500px;
}
.left {
background-color: #00F;
float: left;
height: 400px;
position: relative;
width: 200px;
}
.right {
background-color: #F00;
float: right;
height: 600px;
position: relative;
width: 300px;
}
</style>
<div class="body">
<div class="left"></div>
<div class="right"></div>
</div>
[Mod Edit - No signatures/advertising for non-established members.]
<style type="text/css">
.body {
background-color: #000;
height: auto;
position: relative;
overflow: hidden;
width: 500px;
}
.left {
background-color: #00F;
float: left;
height: 400px;
position: relative;
width: 200px;
}
.right {
background-color: #F00;
float: right;
height: 600px;
position: relative;
width: 300px;
}
</style>
<div class="body">
<div class="left"></div>
<div class="right"></div>
</div>
[Mod Edit - No signatures/advertising for non-established members.]