PDA

View Full Version : DIV not centering? / Overriding width command?


beaastiebabe
01-02-2012, 01:36 PM
It's a div within a div (a footer).

-------------

Top div's css:

#footer {
height: 106px;
position: relative;
background: #002c3d;
background-image: url(footer_background.jpg);
padding-top: 14px;
}



The div inside the footer that I wish to center:

#div_footertext {
width: 896px;
height: 106px;
margin-left: auto;
margin-right: auto;
}



The text within the second div:

.footer_text {
font-size: 11px;
color: #999;
text-align: justify;
}



---------------

And the HTML:

<div id="footer">
<div id="div_footertext">
<p class="footer_text">
Paragraph of text.
</p>
</div>
</div>

---------------

Right now, it doesn't center. The second div just extends all the way out until it hits both sides, like something is overriding the width command. Or maybe it IS centering, but it just takes up the entire space. Thoughts?

domedia
01-02-2012, 10:34 PM
Something is overriding it, but without any context it's hard to say what.

Can you put this somewhere temporarily online, and give us a link?

Ricky55
01-03-2012, 09:23 AM
It is centering you just can't see it. If you give it a background colour...

#div_footertext {
background: red;
}

You can see it. The footer div though is filling the screen because you haven't given it a width. Divs are block level elements and unless you tell them otherwise they will always stretch to fill their parent space in this space the body so the whole screen.

You would normally apply the width and the margin auto to the parent div, i.e., the #footer not the child element.

To align text inside the div just use text-align: center;

HTH