Trying to center auto expanding div

[kaosjon]

Hi i am trying to center a div that auto expands depending on the content, however the div must be fixed positioned with a background that can also expand and contract with the div. I have gotten pretty far with the coding of this, however have struck a problem that i can't seem to fix. So far the div expands and contracts depending on the content and is fixed positioned, but it is not centered and won't center for some reason.

 

Here is the html

 

<div id="accountBar">
<div id="accountContent">sdfsdfsdffsdf</div><!---end accountContent--->
</div><!--- end accountBar--->

 

Here is the css

 

#accountBar {

height: 56px;
width: 100%;
border: thin dotted #333;
margin-top: 56px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: fixed;
}
#accountBar #accountContent {
height: 56px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(../images/accountBar.png);
background-repeat: repeat-x;
display: inline-block;
padding-right: 10px;
padding-left: 10px;
}

 

Thanks for any help you can give

[haku]

Expanding horizontally or vertically? And which div do you want to center - the div you have set with a fixed position is set to 100% width, so it's always going to take up the whole width of the screen, and cannot center.

[kaosjon]

Expanding horizontally or vertically? And which div do you want to center - the div you have set with a fixed position is set to 100% width, so it's always going to take up the whole width of the screen, and cannot center.

 

Hi, thanks for the reply, the div i want to center is #accountContent and i want it to expand horizontally. Is there anything i can do to make this work?

 

Thanks

[SuperBlue]

You just need to apply a min-width to your accountContent, a width would also work, but it depends on what you want to accomplish.

 

Also remember that margin: 0 auto; will center the div. IE6 will need text-align:center; on the parent.