CSS Gurus inside please

[jwerd]

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!

[TheDoc]

<div style="width:500px;">
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<br style="clear:both" />
</div>

[Deej]

float FTW

[jwerd]

<div style="width:500px;">
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<br style="clear:both" />
</div>

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

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

[skrinkladoo]

<div style="width:500px;">
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<div sytle="width:120px:float:left;padding:0 2px;">content</div>
<br style="clear:both" />
</div>

[nicedreams]

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

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

Put the br line after every 4th content line.

Jimmy

[jwerd]

Put the br line after every 4th content line.

Jimmy

Tried that,

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

After:
[]
[]
[]
[]

[]
[]
[]
[]

[Brujah]

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

[Brujah]

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

<div style="width:500px">
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="clear:both"></div>
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="clear:both"></div>
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="float:left;width:100px;">content</div>
<div style="clear:both"></div>
</div>

[jwerd]

First one:

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

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

[jwerd]

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

[Brujah]

Your code has a typo

div sytle

[jwerd]

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

[Badmaash]

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

[TheDoc]

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

[potter]

<div style="display: table;">
 <div style="display: table-row;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
 </div>
 <div style="display: table-row;">
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
  <div style="display: table-cell;"></div>
 </div>
</div>

<div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
<div style="clear: both;"></div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
 <div style="float: left;"></div>
</div>

<div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
<div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>

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.

[Zayne E.]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul#container_4 { list-style-type: none; width: 415px; margin: auto; }
ul#container_4 li { float: left; display: block; background: #000; width: 100px; height: 100px; margin-right: 5px; margin-bottom: 5px; }
ul#container_4 li.omega { margin-right: 0px; }
</style>
</head>
<body>
<ul id="container_4">
	<li></li>
 <li></li>
 <li></li>
 <li class="omega"></li>
	<li></li>
 <li></li>
 <li></li>
 <li class="omega"></li>
	<li></li>
 <li></li>
 <li></li>
 <li class="omega"></li>
	<li></li>
 <li></li>
 <li></li>
 <li class="omega"></li>
</ul>
</body>
</html>