Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Center 4 <div>s in a <div> wrapper?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #25087
    Squintz
    Member

    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?

    #58812
    chris
    Member

    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.

    #58818
    AshtonSanders
    Participant

    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]}
    #58826
    Squintz
    Member

    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.

    #58827
    chris
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.