Center elements inside of a container

[AzizLight]

Hi everybody,
I’ve been trying to find out how to center elements inside of a container. I know how to center the container with margin: 0 auto; but somehow it doesn’t work in my example:
I have three boxes of equal size floated left inside of a wrapper container. I want to center those three boxes. I tried to put them in another div and center that div with margin: 0 auto; but it didn’t work. The actual div was centered in the wrapper but the boxes (that are inside that div) were not centered. You can see what I am talking about here.

Does anyone know how to solve that little problem please?

[AzizLight]

I’m not a CSS pro (actually I’m kind of a noob) but I don’t think the problem comes from here.
I tried to change all the values to pixels but it did not work; it actually got worse :? I Uploaded the result in a different page here.

I also tried tex-align: center; but all it did is center the text rather than the blocks (divs).

[AzizLight]

Ok thanks a lot for the help. I thought that the padding shrink the text rather than the container (blocks).
Anyway, I made it work on every browser except IE. I tried to add this conditional comment, but I never used conditional comments before so I don’t really know what I’m doing (yes I’m a noob):

Code:

This did not work (on IE 6 at least). Does anybody have a solution please?
Here is the pages in question: http://aziz-light.is-a-geek.com/center3boxesPX.html and http://aziz-light.is-a-geek.com/center3boxesEM.html .

[cssgirl]

Your code looks ok. When I position my container to be centered, I always like to add a position relative in there with the margin:0 auto; and the width.

I think your IE problem is not the original width of your box class, it’s the margins and paddings. you should change your conditional comment not to shrink the width of the box, but the margin. IE always doubles the margins on floats. Try putting 5px for your margin and see if you get any results.

[AzizLight]

Wow thanks a lot for the tips, I didn’t know them. The display: inline; method works perfectly if I use pixels. However if I use ems it’s completely useless. I tried to reduce the margin with a conditional comment but it only works partially: The boxes are aligned but not centered. But what is really confusing is that depending on the version of IE the margins are different. In IE 6 I managed to center the content with a margin of 0.8em, but for IE 7 and IE 8 it seems impossible to center the content perfectly with this method. The biggest value that I can set for the margin so that the boxes are still aligned is 0.95em (with 0.96em the boxes aren’t aligned anymore) and the boxes are not perfectly aligned (there is more space on the right then on the left) :?
Is there also a hack for this?
The specific page I’m talking about is this one

[Author]

Posts