- This topic is empty.
-
AuthorPosts
-
June 8, 2009 at 9:08 pm #25087SquintzMember
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 #58812chrisMemberI’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=2370Again 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 #58818AshtonSandersParticipantYea, 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 #58826SquintzMemberThanks 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 #58827chrisMemberIf you do decide to make each box unequal widths, just make sure that they don’t exceed the total width of the container / wrapper.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.