CSS Gurus inside please - GoFuckYourself.com

jwerd · 01-03-2009, 03:57 PM

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 · 01-03-2009, 04:01 PM

Code:

<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 · 01-03-2009, 04:02 PM

float FTW

jwerd · 01-03-2009, 04:05 PM

Quote:

Originally Posted by TheDoc

Code:

<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 · 01-03-2009, 04:06 PM

Quote:

Originally Posted by TheDoc

Code:

<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 · 01-03-2009, 04:15 PM

Quote:

Originally Posted by lamerhooD

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 · 01-03-2009, 04:19 PM

Quote:

Originally Posted by nicedreams

Put the br line after every 4th content line.

Jimmy

Tried that,

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

After:
[]
[]
[]
[]

[]
[]
[]
[]

Brujah · 01-03-2009, 04:22 PM

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

Brujah · 01-03-2009, 04:25 PM

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

Code:

<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 · 01-03-2009, 04:28 PM

First one:

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

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

jwerd · 01-03-2009, 04:29 PM

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

Brujah · 01-03-2009, 04:29 PM

Your code has a typo

div sytle

jwerd · 01-03-2009, 04:33 PM

Quote:

Originally Posted by Brujah

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 · 01-03-2009, 04:45 PM

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> 
<li></li>
</ul>

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

Ciao

TheDoc · 01-03-2009, 04:54 PM

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

potter · 01-03-2009, 05:13 PM

Code:

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

Code:

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

Code:

<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. · 01-03-2009, 05:19 PM

Code:

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

01-03-2009, 03:57 PM	#1
jwerd Confirmed User Industry Role: Join Date: Jun 2003 Location: Costa Rica Posts: 1,953	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! __________________ Yii Framework Guru - Seasoned PHP vet - Partner @ XXXCoupon.com Last edited by jwerd; 01-03-2009 at 03:58 PM..

01-03-2009, 04:02 PM	#3
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	float FTW __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

01-03-2009, 04:22 PM	#8
Brujah Beer Money Baron Industry Role: Join Date: Jan 2001 Location: brujah / gmail Posts: 22,157	Show us the page? I use the same thing and it works ok for me. __________________ Free Premium Domain Lists and Tools at Clickmojo.com For Sale: Obscenity.com

01-03-2009, 04:28 PM	#10
jwerd Confirmed User Industry Role: Join Date: Jun 2003 Location: Costa Rica Posts: 1,953	First one: http://www.virbed.com/gfy/cssboxes.html Second one: (with br every 4 divs) http://www.virbed.com/gfy/cssboxes2.html __________________ Yii Framework Guru - Seasoned PHP vet - Partner @ XXXCoupon.com

01-03-2009, 04:29 PM	#11
jwerd Confirmed User Industry Role: Join Date: Jun 2003 Location: Costa Rica Posts: 1,953	I'm using Firefox 3 on OS X, just for some background on what I'm testing with. I also tested with Safari __________________ Yii Framework Guru - Seasoned PHP vet - Partner @ XXXCoupon.com

01-03-2009, 04:29 PM	#12
Brujah Beer Money Baron Industry Role: Join Date: Jan 2001 Location: brujah / gmail Posts: 22,157	Your code has a typo div sytle __________________ Free Premium Domain Lists and Tools at Clickmojo.com For Sale: Obscenity.com

01-03-2009, 04:45 PM	#14
Badmaash Confirmed User Join Date: Jan 2007 Posts: 2,695	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 __________________ best cbd oil uk - Hit me up on ICQ 400607632

01-03-2009, 04:54 PM	#15
TheDoc Too lazy to set a custom title Industry Role: Join Date: Jul 2001 Location: Currently Incognito Posts: 13,827	You have to have that funky spelling of hmtl to get my example to work __________________ ~TheDoc - ICQ7765825 It's all disambiguation