CODEWITHSUNDEEP
htmlcsspositionabsolute
Pawel
Pawel

Reputation: 27

absolute and relative div positioning

I have created a few divs inside divs:). The problem is that the FOOTER div is printed above the div which contains absolute divs and is not dipalyed as last (at the bottom).

I tried a few combinations for footer div like: "position: absolute; top: 0px; left:0px", but it still displyed at the top of page.

How to move it to the bottom with current divs? http://jsfiddle.net/hsbgpmus/2/

Where is the problem?

ADDED:

I want to have footer div not at the bottom of web browser window, but as last div right after div containing BBBB string.

Upvotes: 0

Views: 110

Answers (4)

praveen_programmer
praveen_programmer

Reputation: 1062

use below code for footer,

position: absolute; bottom: 0px; left:0px

Upvotes: 0

Prateek
Prateek

Reputation: 4490

You have used "position:static" in your example fiddle. Static means the element will flow into the page as it normally would.

For more info. about positioning element using css refer this link.

Positioning element absolutely and setting top and left to 0px means you want to align it at the top. To align element at the bottom of the parent element, you have to set bottom property (not top property)

CSS code : 

<footer_element_class_or_id> {
    position: absolute;
    bottom: 0px;
    left: 0px;
}

Hope it helps.

Upvotes: 2

Anjum....
Anjum....

Reputation: 4204

try this 

<div style="position:relative; height:600px">
<div style="width: 100px">
    <h1>HEaDER</h1>
    <div>
        <div style="position: static">
            <div style="padding: 10px; position: absolute; top: 100px; left: 100px; background-color: yellow;">aaaaa</div>
            <div style="padding: 10px; position: absolute; top: 200px; background-color: yellow;">cccc</div>
            <div style="padding: 10px; position: absolute; top: 300px;  background-color: yellow;">bbbb</div>
        </div>
        <div style="position: absolute; bottom:0">
            <h1>FOOTER</h1>
        </DIV>
    </div>

http://jsfiddle.net/anjum121/xmox7pjq/

you need to wrapp your parent div to relative position

Upvotes: 2

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

try this fiddle

http://jsfiddle.net/hsbgpmus/3/

.footer{

    position:absolute;
    bottom:0;

}

html 

<div class ="footer"><h1>FOOTER</h1></DIV>

Upvotes: 0

Related Questions