Aligning divs horizontally - html

Question

I have this code.
Wish div align blue with red div without affecting the rest of the page.
Notice that the div#leftcontent not go to the bottom of the page and I'm not understanding why.
Maybe the solution is to put the div#leftcontent aligned to the bottom of the page. But how?
Thanks.

Answer 1

you have to change the red div:
bottom: 0px; /*delete*/
position:relative;
maring-top: 86px; /*to align to the blue*/
check this out: http://jsfiddle.net/85unG/48/
and for the height, the reason the its not touching the bottom is:
div#wrap {
height: 768px; /should be 739 px;/
}

Answer 2

CSS absolute positioning to the rescue!
First ditch the fixed height and the overflow:auto for div#wrap. Replace overflow:auto with overflow:hidden:
div#wrap
{
width:1024px;
/*height:768px; /* Forget about it! */
margin:5px auto;
border:2px solid #ccc;
/*overflow:auto;/* Forget about it! */ overflow:hidden;
position:relative;
}
... now note that div#wrap has a relative position:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative; /* AWESOME */
}
This means div#wrap is non-statically positioned, so we can position things absolutely within it... like div#footer and div#social-networks:
div#wrap div#leftcontent div#footer {
position:absolute;
bottom:0px;
}
div#wrap div#nav div#social-networks {
position:absolute;
bottom:0px;
}
This will position the bottom edge of div#footer and div#social-networks 0px away from the bottom edge of its non-statically positioned ancestor - namely, div#wrap.
Bad news though: positioning things absolutely can screw up the natural flow of things, so you have to manually reserve some space for div#footer and div#social-networks. Do this with padding:
div#wrap
{
width:1024px;
margin:5px auto;
border:2px solid #ccc;
overflow:hidden;
position:relative;
padding-bottom:50px; /* this is new... you can choose a better number than 50px */
}