CODEWITHSUNDEEP
htmlcsswebpaddingmargins
Quintin
Quintin

Reputation: 309

margin-bottom not working?

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/

Upvotes: 1

Views: 4331

Answers (2)

Dan
Dan

Reputation: 10351

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.

Upvotes: 0

entonio
entonio

Reputation: 2173

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.

Upvotes: 1

Related Questions