CODEWITHSUNDEEP
css
code master
code master

Reputation: 2026

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

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 https://i.sstatic.net/bMqXD.png

Screenshot 2 here is the correct placements of these divs

enter image description here

Upvotes: 0

Views: 4053

Answers (2)

Evan Teran
Evan Teran

Reputation: 90422

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;
}

Upvotes: 2

wdm
wdm

Reputation: 7189

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%;
}

Upvotes: 0

Related Questions