Question

All of the margin settings for the content within the main body section of the homepage of this site I’m working on are not displaying properly and they are overlapping one another. This has been causing me a crap-load of annoyance and I can’t figure out what’s wrong. Please take a look and see if you can help me.

once again, there are 3 sections within the main body and they are all showing up wrong!

Here’s my site:

http://studentweb.eku.edu/alamaldean_alami/d+m/index.html

The first problem is that from the first section (history) to the second (buttons) there is an extra gap of 20px in addition to the margin that I have set, why is there a random gap (firebug and google’s ‘inspect element’ both do not show anything there, just a random extra space).

The second problem is that the ‘button’ section should have a 20px margin between it and the ‘content-area’ section since ‘content-area’ is set to have a margin of 20px.

The final problem is that the bottom margin between the ‘content-area’ section and the footer should be a total of 40px because both of those each have a margin of 20px.

Answer 1

Remove below css from .buttons class line 194 style.css

position:relative;

Add this css on home.css line 3

.history {
    background: none repeat scroll 0 0 transparent;
    margin: 20px 20px 0;
    padding: 10px;
}

Add this on style.css line 108

.footer {
    padding: 20px 20px 10px;
}

style.css line 102

.content-area {
    background: url("..//images/transbackc.png") repeat scroll 0 0 transparent;
    margin: 20px 10px;
    padding: 10px 0;
}

home.css line 38

.services div {
    border-right: 1px solid white;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    min-height: 250px;
    padding: 9px;
    text-align: center;
    width: 400px;
}

Final output of above css see below image: