Grow your CSS skills. Land your dream job.

Center 4 <div>s in a <div> wrapper?

  • # June 8, 2009 at 9:08 pm

    I’m trying to improve the layout for the wordpress e-commerce plugin (grid view). It seems way out of wack to me and the css even looks very strange. So…

    Check out the following pages source to see what I have so far.
    http://www.diapercakesbyjenny.com/tryingcss/

    I want to 4 <div>s to be centered inside of a wrapper <div>. What is the technique for doing that?

    # June 8, 2009 at 9:33 pm

    I’m new and unexperienced, but for what it’s worth I am going to try to give this a wack.

    I would try to make the four smaller div’s equal to 1/4 th the size of the wrapper. So, if the width with padding and borders are 50 px each I would make the wrapper 200 px total. Also if you are wanting to center the main div in the page. I would use an auto margin for left and right.

    Another thing I would take a look at is the technique for making each column equal length. To do this take a look at the technique of wrapping each div in a large wrapper and using absolute positioning. I found this technique in another post on this forum. Here is the url for the previous post
    http://css-tricks.com/forums/viewtopic.php?f=2&t=2370

    Again I’m not much experience but I’m trying to learn. Hope this helps you as much as it helped me when I found it.

    # June 9, 2009 at 12:34 am

    Yea, those both sound like they would work.

    If there’s always going to be four boxes and they’re always the same width, I would make a container for just those four boxes, and center that.

    ie:

    Code:
    —————
    —————
    —————
    —————

    Centering would be like this (bolded):

    Code:
    .product_display_wrap { [b]text-align:center;[/b]}
    .4products_wrap { text-align:left; width: 450px; [b]margin:0 auto[/b]}
    # June 9, 2009 at 8:51 am

    Thanks for the help. That should be a good enough solution. I don’t think I need the boxes to vary in width. I can just make sure all my product images are the same size.

    # June 9, 2009 at 8:53 am

    If you do decide to make each box unequal widths, just make sure that they don’t exceed the total width of the container / wrapper.

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

You must be logged in to reply to this topic.

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