[Build a Resume] I've a question about margins



I would like to know, based on the page I built, why my footer doesn't move away from the left and right blocks even though I specified the top margin to be 10px.

However, when I put 10px bottom margin either on the left and right blocks, then the footer moves away.

To demonstrate this clearly:

With 10px bottom margin on left and right blocks. Footer moves away:

With 10px top margin on footer. Footer doesn't move away:

Replace this line with your code.


One way is to make the #footer float to the left like the .right and the .left class. Another is to make #footer an inline-block. It is because margins work when the affected elements are either float or inline blocks as they prevent it from collapsing.
A more detailed answer can be found here: http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work

Float method:

#footer {
    /* Your style here */
    float: left; /* It can be float: right as well */
    margin-top: 10px; 

Inline-block method:

#footer {
    /* Your style here */
    display: inline-block;
    margin-top: 10px;

You can write it as margin: 10px 0px 0px 0px;. margin-top: 10px; is just a preference.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.