3 boxes inside 1 box - how come they won't center?

is this a hack problem?

[modo]

hello all

i have meself some code here:

CSS:

#bookscontent {
width: 475px;
text-align:center;
padding:5px;
margin: 5px;
background-color: #ccc;
float:left;
}

.bookpix {
margin: 10px;
width:115px;
height: 150px;
float:left;
background: #FFF;
border: 1px solid #9999CC;
text-align:center;
}

----
I would like the .bookpix div's to be centered within the bookscontent div. it won't do it!

here's the HTML i'm using:

<div id="bookscontent">
<div class="bookpix">this</div>
<div class="bookpix">that</div>
<div class="bookpix">thus</div>
</div>

[SuzyUK]

I would like the .bookpix div's to be centered within the bookscontent div. it won't do it!

the correct way to center an element is to set an explicit width on the container you wish to center (which you've got) and then make it's left and right margins ~ auto.

But! and there always one
IE5+ (and IE6 quirks) doesn't do this the right way

In the CSS for #bookscontent you have set up

text-align: center;

, which is not the right way to center, but IE does center an element with this.

text-align: center;

should only center inline text, not a block-level element (although it's now a common cause of misconception, thanks to IE ;))

If you do continue to use that (I would) and if you then wanted the actual text alignment in the

.bookpix

divs to go back to normal (default left) you would then need to explicitly set

text-align: left;

in there to override inheritance from the parent.

So this is all you should need to change (in .bookpix) to make it work for all..
margin: 10px auto;

this leaves the top and bottom margins at 10px, but sets the left and right margins to auto. The inner box then auto calculates equal margins between it and it's parent according to the width of both.

Suzy