Centering with unknown or fluid width.

[Snot]

I would like my content box to expand and shrink with the text inside of it. My issues is getting it to center as well.

 

My content box appears to be positioned relative to the home button and that's causing it to move off center. I'm not sure why its tied into the home button. It must have something to do with the way I'm displaying my content with the on-hover effect.

 

On test.php the right side of the content box is the only side that moves when the box expands or shrinks. The left side stays in the same place in line with the home button.

 

http://www.wararmada.com/tdb/test.php

 

#contentBox ul ul li {
    border:#000 solid;
    border-width:1px;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius:1em;
    max-width:700px;
    width:auto;
    padding:10px;
    position:strict;
    margin-top:50px;
    color:#F0F0F0;
    background-color: rgba(255,0,0,0.3);
}

 

I changed the code to positioned strict that "should" make it its own entity correct? Then I would plug in my width and my margin autos and it "should" be center right? It doesn't, its still aligned with the home button. It seems like position strict would break the connection to the home key. Is that how it would normally work? I just starting to get used to using position tags. I'm thinking this could be a side effect of the way I've got the content to display on hover. I guess technically my content box is inside of the nav bar. Its made of hover text that I've added some style to and then a bit of javascript to keep it from closing when you take your mouse off the button.

 

I need the alignment to anchor in the middle of the content box in stead of on the left edge. I'm just getting my feet wet with positioning. Relative makes it move within its parent div and Strict should allow it to move freely as far as i know? Seems like no matter what I do the content box is still tied into the home button.

 

I've also tried

 

http://www.wararmada.com/tdb/test2.php

 

#contentBox ul ul li {
width: 75%;
max-width:700px;
margin: 50px 0 0 25%;
padding:10px;
    border:#000 solid;
    border-width:1px;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius:1em;    
    color:#F0F0F0;
    background-color: rgba(255,0,0,0.3);
}

 

Its closer to what I want. The content box expands and stays near the middle of the page but depending on the amount of content in the box it could be off centered to the left or right side.

 

Is there anyway to change the anchor point of the content box? If i could align it using the center of the content box as the anchor it would work.

 

Any idea on how I can get around this? It could just be that I'm not very good with css. I'm playing around with adding another div around the content box but i haven't came up with any results yet.