How to place a Div at the bottom of another div? - css

Question

I want to place one DIV (ID eSharing) at the bottom of another DIV (content-primary)
Here is the CSS class for DIV (ID content-primary)
.layout-3 #content-primary {
padding: 0 10px;
width: 502px;
}
#content-primary.article {
padding-bottom: 2.5em;
}
#content-primary {
width: 501px;
}
#content-primary {
clear: left;
float: left;
margin: 12px 0 0;
padding: 0 10px;
width: 500px;
}
Here is the CSS class for DIV ( ID eSharing)
#eSharing {
height: 230px;
margin: 12px 0 0;
overflow: auto;
padding: 0 10px;
position: relative;
}
Screeshot link http://i.stack.imgur.com/bMqXD.png
Screenshot 2

Answer 1

unfortunately, CSS doesn't have the capability to position an item relative to another item in the general case. It seems like the solution may be simple for you though.
You are floating one div and want to place another div right below it?
Why not put both divs inside an outer div, and float the outer div instead? The two inner divs will appear one on top of the other this way.
EDIT: I've kinda spelled it out, but here's an example:
<div id="outer">
<div id="content-primary">Your content</div>
<div id="eSharing">Other content</div>
</div>
and for the CSS, don't float either content-primary or eSharing. Instead, do something like this:
#outer {
clear: left;
float: left;
}
#content-primary {
width: 501px; /* why? */
}
#content-primary {
margin: 12px 0 0;
padding: 0 10px;
width: 500px;
}
#eSharing {
height: 230px;
margin: 12px 0 0;
overflow: auto;
padding: 0 10px;
}

Answer 2

EDIT: Here is another option where you have a main content area "a", sidebar "b", and two adjacent containers below "c" and "d".
Demo: http://jsfiddle.net/L655v/
One more that has a main content area "a", sidebar "b" and a full-sized content area "c" below it...
http://jsfiddle.net/L655v/1/
(trying to mimic what your screen shots may be implying).
Not sure exactly which you're going for but here are several layout options...
Demo: http://jsfiddle.net/aNqak/
Here is the code I used in my fiddle...
HTML...
<div id="a">a</div>
<div id="b">b</div>
<br /><br />
<div id="c">
c
<div id="d">d</div>
</div>
<br /><br />
<div id="e">e</div>
<div id="f">f</div>
CSS...
#a {
background-color: #999;
}
#b {
background-color: #ddd;
}
#c {
background-color: red;
padding: 5px;
}
#d {
background-color: pink;
}
#e {
background-color: blue;
float: left;
width: 75%;
}
#f {
background-color: green;
float: right;
width: 25%;
}