CODEWITHSUNDEEP
csshtmlmargin
Moussa Harajli
Moussa Harajli

Reputation: 1516

Margin on bottom wont work

I am making a website for a minecraft server and I have a centered div just saying hello repeatedly to see what happens when the page get overflowed. I set this centered div to have a margin of 30px on the top and bottom but it only works on the top. I'm not sure why this is happening and if someone could help me that would be great!

Here is a working fiddle.

The CSS For the centered div

#BodyInner {
    position:relative;
    width:965px;
    height:auto;
    min-height:100%;
    margin:30px auto;
    background-color:#FFF;
    border-radius:5px;
    border:1px solid #CCC;
    box-shadow:0 0 12px rgba(0, 0, 0, .1);
    -moz-box-shadow:0 0 12px rgba(0, 0, 0, .1);
    -ms-box-shadow:0 0 12px rgba(0, 0, 0, .1);
    -o-box-shadow:0 0 12px rgba(0, 0, 0, .1);
    -webkit-box-shadow:0 0 12px rgba(0, 0, 0, .1);
    word-wrap:break-word;   
}

Upvotes: 0

Views: 71

Answers (1)

Appleshell
Appleshell

Reputation: 7388

The margin of div#BodyInner is applied to div#Body - which itself has a lot less height than div#BodyInner. Remove height:100%;of div#Body and your code will work.

Upvotes: 3

Related Questions