Forums

Squintz

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?

chris

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.

AshtonSanders

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:

<div class='product_display_wrap'>
	<div class='4products_wrap'>
		<div class='product_wrap'>
			---------------
		</div> 
		<div class='product_wrap'>
			---------------
		</div> 
		<div class='product_wrap'>
			---------------
		</div> 
		<div class='product_wrap'>
			---------------
		</div> 
               <div class='clear'></div>
	</div>
</div>

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]}

Squintz

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.

chris

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.

treehouse : what would you like to learn today?

Forums

Center 4 s in a wrapper?