1

I am having trouble for some reason with getting the bottom of my page to have some padding. I have a content box that goes to the end of the page and hits the bottom and doesn't look the greatest. I want to give some space from the bottom of the page to fix this issue, but it seems that margin-bottom isn't working as I expect it to? I have included the following code which should be everything that affects the content box. I have tried removing the margin:0 in the html/body (even though I kind of need that), but that doesn't seem to work either? I feel like I am missing something really obvious.

html, body {
margin:0;
padding:0;
width:100%;
height:100%;
text-align:left;}

#content {
position: absolute;
left: 50%;
margin-left: -368px;
top: 104px;
padding-left: 35px;
padding-right: 35px;
padding-top: 15px;
padding-bottom: 15px;
background-color: white;
border: 1px solid black;
width: 664px;
margin-bottom: 20px;}

Any help would be greatly appreciated :) Thanks!

Live link - http://quintinmarcus.com/portfolio/

Quintin
  • 311
  • 1
  • 5
  • 12
  • Can you explain more what you are doing here? Why do you have content absolute positioned ? You can not use margin on absolute positioned object as it wont affect the other elements as it has essentially been taken out of the flow. – Zac May 09 '11 at 01:37
  • 2
    Also the `margin-left:-3680px` seems a little insane – mVChr May 09 '11 at 01:39
  • Sorry about the -3680, it should be -368, I fixed that. It centers the content horizontally. I have it absolutely positioned because it is on top of an image. I am using some CSS that rescales an image as the browser is resized, so it works as my background. Is there any way to still get some form of margin on the bottom? – Quintin May 09 '11 at 04:57
  • Can you supply a live link or put something up on jsfiddle.net ? It will be easier to help you out if we have something to look at as well as play with. – Dan May 09 '11 at 06:04
  • http://quintinmarcus.com/portfolio/ – Quintin May 09 '11 at 13:18
  • You definitely would be 100% better off setting the image as the background. – Dan May 09 '11 at 23:32

2 Answers2

1

Since content has position: absolute, its after margins do nothing, nor should it stretch the inner height of the body so that the body's padding-bottom does anything.

entonio
  • 2,143
  • 1
  • 17
  • 27
  • Hmm, well padding-bottom is definitely working, the box grows on the bottom when I increase it for more padding. I tried switching positions but that also isn't making margin-bottom work... – Quintin May 09 '11 at 04:43
  • Please read more carefully. Neither the element's margin-bottom nor the body's padding-bottom will ever do anything as long as the element is positioned absolutely, because an absolutely positioned element doesn't impact the layout of its siblings or ascendants. So, why is the element positioned absolutely in the first place? – entonio May 09 '11 at 11:41
  • I read carefully and explained that padding works on absolutely positioned things. I get what you are saying about margin-bottom. The element is positioned absolutely because it is on top of an image. – Quintin May 09 '11 at 20:48
  • 1
    You're talking about the padding-bottom of the **element**, I'm talking about the padding-bottom of the **body**, which is what you're looking for. Why don't you pssition the image absolutely instead of the element, or define it as a background? – entonio May 09 '11 at 22:24
0

If you want to centre your layout, modify your current style for #content to the following:

CSS:

#content {
width:664px;
margin:104 auto 20px auto;
padding: 15px 35px;
background-color: white;
border: 1px solid black;
}

This will also enable you to give the margin at the bottom you want.

Dan
  • 10,171
  • 7
  • 38
  • 31
  • This also centers it, but still won't give me the bottom margin, even when I use margin-bottom after? – Quintin May 09 '11 at 04:41
  • 1
    Can you supply a live link or put something up on jsfiddle.net ? It will be easier to help you out if we have something to look at as well as play with. – Dan May 09 '11 at 05:00