Grow your CSS skills. Land your dream job.

Center elements inside of a container

  • # September 22, 2008 at 10:18 am

    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?

    box
    # September 22, 2008 at 10:44 am

    You’re mixing pixels and percentages – your width in % and padding/margins in px, so the relative lack of consistency will mean that you cannot centre your content. Use percentages for your padding/margins too and make sure that once all widths/paddings/margins are added together they do not exceed 100% (then you can have fun getting it all to work in IE6 ;) )

    # September 22, 2008 at 11:00 am

    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).

    box
    # September 22, 2008 at 11:18 am

    Currently you have an overall width of 666px. A box width of 202 that has a margin 10px each side AND a padding of 10px each side – that’s (202 + 10 + 10 + 10 + 10) x 3 = 726px – some 60px wider than your set width.

    # September 23, 2008 at 8:19 am

    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 .

    # September 23, 2008 at 1:09 pm

    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.

    # September 23, 2008 at 3:03 pm
    Quote:
    IE always doubles the margins on floats

    Add "display: inline" to the float and it fixes the double margin thing in IE. It won’t affect anything else because display rules are ignored when you declare a float, since floats are always block-level. For whatever reason, IE sees it and it convinces it to use the correct amount of margin :lol:

    # September 23, 2008 at 4:01 pm

    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

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".