Adding Extra Space At The Bottom Of Page

[iGuest 3]

I have often wanted space beneath the container div so that if rounded corners were used they would display well and not curve into the bottom of the screen. I tried to get that space by adding a bottom margin to a div (any div!) using the technique above, but it would never work for me. I did find a way that worked (at least for me) and it did use margins.

When I set up the page I use a container div and inside that insert nested divs; for example, a text div (floated right or left), a sidebar div (floated right or left) and a footer div (cleared both). Then I add a top margin to the footer div as shown below (I use Dreamweaver and add that space in the Positioning panel).

#footer {

clear: both;

position: relative;

top: 20px;

}

Because of some quirk in html, if I add a 20 pixel margin at the top of the nested footer div, a 20 pixel space will appear at the bottom of that div that does not make the container div an additional 20 pixels high, effectively adding a 20 pixel space below the container div. This raises the bottom of the container div 20 pixels off the bottom of the screen and the rounded corners are completely displayed.

I hope this technique helps anyone who was having the same problems I was, and who are also hovering dangerously close to frustrated insanity.

[rpgsearcherz 5]

Shouldnt the "top" marker tell it where the top of the div should be located in relation to the screen as a whole (in this case being almost at the top of the screen)?I've personally had no issues with using margins. Using padding increases the size of the div -- margins shouldn't.

[Tira 0]

I obviously did not explain myself well. Let me try again (and add a little bit more that I forgot). Please forgive me if I explain that which you already know.The 1000 px wide container div (absolute position, 50% left position and -500 px left margin to center [or with a left and right auto margin to accomplish the same thing]) holds a left div (relative position, floated left) and a right div (relative position, floated right) and finally the footer div (with a relative position and the required clear: both function so it won't go flinging itself all over the screen). This puts the footer at the bottom of the page and it adjusts to the depth of the left and right div. At this point it still bumps against the bottom of the container div and/or the screen.Include a 20 pixel top margin to the footer div to move it 20 pixels off the bottom of the left or right div (whichever is longer). I find it works the best if I then include a table in the footer div to hold whatever information must go there. Because of some quirk in css (not html-my mistake), if I include an empty final row in the table (which is usually approximately 20 pixels high) the final row extends beyond the edge of the container div and raises the whole container div off the bottom of the screen. Tested and works in IE, Chrome, and Firefox.I would love to be able to do this using a bottom page margin or container div margin or space or whatever, but I have never been able to get that to work. I am envious that you have. You are correct, padding does add space, especially right and left, and causes problems, but top or bottom padding in the footer div just makes the container div longer without creating the blank space below it. If you know a trick to get the bottom margin on the page or container to move it off the bottom of the screen, please share. It would be much cleaner code than what I'm doing now and I would be grateful.So many people seem to have trouble with this and I thought I would explain my workaround. However, I'm always open to better code!Thank you.

[darko100 1]

A very useful tip , there are many fixes on CSS to create a good layout. Relatives are the part of CSS which "save our *bottom*" when margin is not possible.If you add a nested DIV in a DIV and suply a margin , the both will move.So a good find