Friday, 27 September 2013

Footer DIV comes up on Container DIV having two children DIVs

Footer DIV comes up on Container DIV having two children DIVs

Container : relative positioned. Have two child div left and right column
having 60% and 30% width of container.
Left child : absolute positioned . *Top:0; Left:0;* width: 60%; Right
child : absolute positioned . Top:0; right:0; width: 30%;
Footer: Relative positioned.
But footer comes up. Code Given below.
<style type="text/css">
#container {
position: relative;
margin:0 auto;
width: 1000px;
background: #C63;
padding: 10px;
height:auto;
}
#leftCol {
position: absolute;
top:10px;
left:10px;
background: #e8f6fe;
width: 60%;
}
#rightCol {
position: absolute;
top:10px;
right:10px;
width:30%;
background: #aafed6;
}
.box {
position:relative;
clear:both;
background:#F39;
}
</style>
<div id="container">
<div id="leftCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
</div>
<div id="rightCol">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
</div>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus
varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit.Phasellus varius eleifend.</p>
</div>

No comments:

Post a Comment