The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // 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.

    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

    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.



    Centering would be like this (bolded):

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed