Hi there,

I have this html:

<div class="box">
   <h3>TEXT</h3>
   <p>
      BOX CONTENT<br />
      MORE CONTENT
   </p>
</div>

And this CSS:

 .box {
        background: #fff url(../images/box_header.gif) repeat-x top;
        border: 1px solid #EC7700;
        }
        
    .box p {
        padding: 6px;
        padding-top: 4px;
        background-color: #FF0033;
        }
    
     .box h3 {        
        padding: 6px;
        font-size: 14px;
        color: #FFF;
        font-weight: bold;
        }

My problem is whenever I attempt to center something within this div, the content that should be in the <p></p> tags is displayed outside of it. I have tried many ways including <div align="center">, <center>, <span style=...> and <div style=...>.

Why does this not display correctly?

If you would like to see the website its http://northvillebasketball.com, I have added a background color to the <p> tags so you can see where they are placed in relation to the text.

Thanks in advance!

Just put:

text-align: center

Into any of those CSS code blocks and you'll see something happen.

I have just added it to the p element, but it still does not display correctly, please check out http://northvillebasketball.com and look at the recent news section and you will see what I mean.

I must be blind - it looks centered to me.

I apologize, I did not explain myself enough. If you look to the right side of the page you will see a contact us box, that box has a pink background and uses the same styling as the recent news box. The <p> element has some padding to make it look nicer, but the text is not displaying within the <p> tags in the recent news box. Thus, the padding does not work and the box displays incorrectly.

If you look at the code, the No Recent News text is within the <p> tags in the Recent News Box, but it is displayed outside. The pink area is generated by the <p> tags.

Did you fix it ? I looked at the code and did some testing , still don't see the problem you describe.

Pink area??

I'd be a little concerned about the navigation floating up behind the header text and logo in IE6 though

I was able to fix this, and I am aware of the IE6 issue which is my next hurdle. Thanks!