css relative absolute margin,css - Position Relative vs Absolute? - Stack Overflow

Putting an answer , as my reputation aint enough to comment. But dont look at this as an answer, just a additional info, as myself, had some problems with both footer, and positioning.

When setting up the page, so that my footer always stays at the bottom, with position absolute, and main container/wrapper with relative position.

I then found some issues with my text content, and a menu inside the same content(white part of page between header and footer), when setting these to absolute, footer no longer stays down.

Postitioning is, as you say a complex theme.

My solution, to the content I wanted in 'absolute' positon in my webpage, and not be pushed to the side, when in example opening a drop down menu, was to actually give it postition relative, and putting it 35em below my drop down menu.

(35em is the heigth of my dropdown menu, when fully extended)

Then, Top:-35em, for the content that before was pushed to the side.

And then adding margin-bottom:-35em.

This way, the content is "below" my drop down menu, but visually it is side by side with my drop down menu!

And the white space below down to the footer, is with only 10em margin, as it was before starting to play around with this.

So my solution to this was like this :

html, body {

margin:0;

padding:0;

height:100%;

}

h1 {

margin:0;

}

#webpage {

position:relative;

min-height:100%;

margin:0;

overflow:auto;

}

#header {

height:5em;

width:100%;

padding:0;

margin:0;

}

#text {

position:relative;

margin-bottom:-32em;

padding-top:2em;

padding-right:2em;

padding-bottom:10em;

background-repeat:no-repeat;

width:70%;

padding-left:auto;

margin-left:auto;

margin-right:auto;

right:10em;

float:right;

top:-32em;

}

#dropdown {

position:absolute;

left:0;

width:20%;

clear:both;

display:block;

position:relative;

top:1em;

height:35em;

}

#footer {

position:absolute;

width:100%;

right:0;

bottom:0;

height:5em;

margin:0;

margin-top:5em;

}

I see your question is answered good, but after alot of troubleing I found this to be a very good solution, and a way to understand better how positioning works..

When I place my text content, below my drop down menu, it doesn't push my text to the side.

If I changed the text to position absolute, the footer did not stay in place.

As I can believe this is an issue for more people then me, I add this here.

What in fact happends, is I put the text, 35ems, below my drop down.

Then, I visually put it right next to eachother, with relative position, and top:-35em;, and evening out the huge space below, with margin:-35em;

negative values are underestimated at times, very good functionality, when one understands these positions better!

Natually, fixed position, also seemed logic for my footer, but I do really want the footer to go below the viewport, if the text, or content, is longer than the viewport.

And to stay at the bottom, if there is little content on the page.

This setupp fixed that very nicely, and remember to use 'em', not 'px' for a more fluid/dynamic page layout! :)

(there may be better solutions, but this works for me cross platforms, as well as devices).