Question

I have a nested div element:

        <div id="footer">
            <div id="footer_text">
                <p>My foooo text</p>
            </div>
        </div>

and its CSS code:

#footer
{
    position: absolute;
    bottom: 0px;
    margin-bottom: 5px;
    margin-right:50px;
    margin-left:50px;
    width:90%;
    height:16px;
    color:white;
    font-size:12px;
    background:#000000;
    border-style:solid;
    border-width:1px;
    border-color:#F0FFFF;
    text-align: center;

}

Seems to work fine in firefox 7. The problem is that it only works when I don’t have the

<p>My foooo text</p>

when I add it, is appears the text outside the div border, and it also brings up an annoying vertical scroll bar.

I tried some solution here, but I can’t seem to make it work..

Answer 1

This is because p element has default margin

I think it is good solution to reset margins and paddings for everything at the start:

* {
padding: 0;
margin: 0;
}

Anyway you can just add

p {
margin: 0;
}

Moreover you don’t need to set height of footer to get it as you want. It is better to use paddings. You get everything vertical centered atuomatically when you set the same top and bottom padding
.