CSS Gurus inside please
 

For those that know CSS pretty well should have no issue at all with this, but it's something I've never taken the time to learn how to do properly.

I want to create 4 boxes per row, in CSS, based on a specified sized wrapper.

So let's say we have a wrapper of 500px, how can I add in the CSS so that no matter how many boxes it creates, it only positions 4 per row (at around 120px each with 5 pixel padding).

What's the easiest way to accomplish this?

I've seen it done with listed items, but I can't remember how it's been done.

The reason I want to do this in the first place is I've always done it with tables, but I want to get away from tables as much as I can and it's less backend coding if I'm doing it the CSS route.

Thanks in advance! :thumbsup:thumbsup

float FTW

Hey thanks for some help, but it's not quite what I'm looking for actually. :thumbsup

I'm shooting more for this:
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]
[ ] [ ] [ ] [ ]

:thumbsup

Put the br line after every 4th content line.

Jimmy

Tried that,

Before:
[]
[]
[]
[]
[]
[]
[]
[]

After:
[]
[]
[]
[]

[]
[]
[]
[]

:(

Show us the page? I use the same thing and it works ok for me.

Example:
http://www.expire.biz/test.html

First one:

http://www.virbed.com/gfy/cssboxes.html

Second one: (with br every 4 divs)
http://www.virbed.com/gfy/cssboxes2.html

I'm using Firefox 3 on OS X, just for some background on what I'm testing with. I also tested with Safari

Your code has a typo

div sytle

haha, didn't catch that, just copied and pasted The Doc's code to test it and didn't change anything else.

Thanks Man!!!

Hi
.... are the boxes going to hold images?

You might want to have a look at doing it using a list....

Lats say you make the list holder 500px wide and the boxes using li's 100px wide but wide margin you will be able to fit 4 boxes in each row as the 5th box will fall under.

So make teh ul = 500px, li=100px, float the li's to the left, get rid of list styling and you margins and voila.


<style type="text/css">

ul {
width:500px;
min-height:400px;
list-style:none;
padding:0;
margin: up to you***
}

li {
float:left;
width:100px;
height: up to you
border:1px solid #FFFFFF your choice here this will outline the boxes;
margin: ur choice to not have all the boxes clumped together;
}

</style>

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> <!-- this one will fall under forming the next row -->
<li></li>
</ul>



Obviously you gonna have to screw around with the above to get your own look and feel.


Ciao

You have to have that funky spelling of hmtl to get my example to work :)

You could also do it using ul/li. As someone stated above me. I dunno, there's easily another twenty different ways to do this. Choose one. :thumbsup