A table made out of divs

This is a table made out of divs. I'm not sure quite why people might want this, but someone did ask how it could be done, so...

HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO
HELLO

Here's the code :

HTML
<div id="dwrap">
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
<div>HELLO</div>
</div>
 CSS
#dwrap div {
width: 100px;
height: 100px;
border: 1px solid #FF00FF;
float: left;
}

You could change the size of the boxes or the number of boxes per row quite easily and if you add 'overflow: auto' to the style, you could have twelve scrolling boxes - like this :

John Achterberg
Nationality: Dutch
D.o.B.: 08/07/1971
Height: 6' 1" (185cm)
Weight: 14st 3lbs (90.34kg)
Previous Clubs: PSV Eindhoven, FC Utrecht
Position: Goalkeeper
Ryan Taylor
Nationality: English
D.o.B.: 19/08/1984
Height: 5' 8" (173cm)
Weight: 11st 11lbs (74.91kg)
Position: Defender
Gareth Roberts
Nationality: Welsh
D.o.B.: 06/02/1978
Height: 5' 8" (173cm)
Weight: 11st 11lbs (74.91kg)
Previous Clubs: Liverpool
Position: Defender
Michael Jackson
Nationality: English
D.o.B.: 04/12/1973
Height: 6' 0" (183cm)
Weight: 13st 10lbs (87.16kg)
Previous Clubs: Crewe, Bury, Preston Position: Defender
Ian Sharps
Nationality: English
D.o.B.: 23/10/1980
Height: 6' 3" (191cm)
Weight: 14st 3lbs (90.34kg)
Position: Defender
Iain Hume
Nationality: Canadian
D.o.B.: 30/10/1983
Height: 5' 7" (170cm)
Weight: 11st 5lbs (72.18kg)
Position: Striker
Mark Rankine
Nationality: English
D.o.B.: 30/09/1969
Height: 5' 9" (175cm)
Weight: 12st 3lbs (77.63kg)
Previous Clubs: Doncaster, Wolverhampton, Preston, Sheff Utd
Position: Midfielder
Simon Haworth
Nationality: Welsh
D.o.B.: 30/03/1977
Height: 6' 3" (191cm)
Weight: 15st 1lbs (95.79kg)
Previous Clubs: Cardiff, Coventry, Wigan Position: Striker
Gary Jones
Nationality: English
D.o.B.: 10/05/1975
Height: 6' 3" (191cm)
Weight: 15st 2lbs (96.25kg)
Previous Clubs: Nottm Forest
Position: Midfielder
Paul Hall
Nationality: Jamaican
D.o.B.: 03/07/1972
Height: 5' 9" (175cm)
Weight: 11st 3lbs (71.28kg)
Previous Clubs: Torquay, Portsmouth, Coventry, Bury, Sheff Utd, West Brom, Walsall, Rushden & Diamonds
Position: Midfielder
Calvin Zola
Nationality: Congo
D.o.B.: 31/12/1984
Height: 6' 3" (191cm)
Weight: 13st 7lbs (85.8kg)
Previous Clubs: Newcastle, Oldham
Position: Striker
Russell Howarth
Nationality: English
D.o.B.: 27/03/1982
Height: 6' 2" (188cm)
Weight: 14st 8lbs (92.61kg)
Previous Clubs: York
Position: Goalkeeper

Here, I've listed some of the Tranmere Rovers Football Club squad as an example, but it could be quite good for something useful (though I'm not quite sure what).

Comments

#1
2005-12-13 r_ashish12 says :

The suggestions given on the page are really productive. I got the reqd output by using these suggestions.
Thanks A Lot To the Author.
The page is the BEST.

#2
2005-12-13 BonRouge says :

Now I'm curious... What kind of thing did you do with this idea? Could you post a link to your page?
Thanks.

#3
2005-12-24 FliX says :

hi
i used this table on my website here smile


thanx for you wonderfull site!

#4
2005-12-24 BonRouge says :

Yes, you did... Thanks for sharing that with me.
Now, I'd recommend removing the xml prologue and adding a meta tag with the character set.

#5
2006-01-02 Jay says :

Hey. nice layout, I shall make fine use of it smile

ane alteration I will make is to remove the double-border effect (the inner borders look darker than the outer ones). This is achievable by making use of the following CSS (for a black border)

border-bottom: solid 1px black;
border-top: solid 1px black;
border-left: solid 1px black;
border-right: solid 1px black;

all you need to do is add the appropriate css to the right table cells and you wont have the double-border effect.

#6
2006-01-02 BonRouge says :

all you need to do is add the appropriate css to the right table cells and you wont have the double-border effect.
Yes, good point.

#7
2006-01-03 newbie says :

I don't understand the usage of the floats in this case... Won't it work without?

#8
2006-01-03 BonRouge says :

No, it won't work without the floats.

#9
2006-01-28 Jay says :

i found a simpler solution to the double-border issue.

just use:
table {
border-collapse: collapse; }

td {
border: 1px solid #333; }

#10
2006-06-21 Jay says :

How would you manage to do more advanced tables, like columns with different widths?

-Jay

#11
2006-06-22 BonRouge says :

Well, maybe that's where it falls apart. What are you trying to do exactly? It's probably better to do it another way.

#12
2006-09-16 Jodelson Sabino says :

Thank you BonRouge. Nice clue! I have used it to compose the top stripe with pictures in
this page.

#13
2007-10-05 Carrie says :

I'm a bit of a newbie to all this code and I really want to know, can you change the colours of the scrollbar in a div...thing *cringe*?

#14
2008-01-21 To Carrie: says :

Hey. It's quite easy to change scrollbar colors.
<style>
scrollbar-face-color: 0099FF;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: FFFF00;
scrollbar-shadow-color: 000000;
scrollbar-darkshadow-color: CC33FF;
scrollbar-arrow-color: 000000;
scrollbar-track-color: 000000;}

</style>

#15
2008-03-24 Jerry says :

I cant seem to figure out a way to have all of the Divs centered on the page as well. I have made my table out of divs (each with a picture and subtitle) but I cant get the whole table to be centered on the page? any ideas? (I want to keep the dynamic aspect of it that it can change dimensions with the width of the page)

#16
2008-03-28 tinny says :

How does it know it has to use 4 elements per row?

#17
2008-04-06 BonRouge says :

Carrie,
Good browsers don't support the scrollbar colour code.

Jerry,
You could maybe use a percentage width for the #dwrap and also percentages for each of the inner divs.

tinny,
It uses four elements per row due to the width of each element and the width of this column here. This column is just over 400px wide (I think) and each box is set to be 100px wide. The elements float to the left, making a row across the column, when there is no room for one more little box, the next element goes below the row. I hope that makes sense.

#18
2008-05-28 Scott says :

Yeah, I seen this before. But your missing one, very difficult piece.
This page has three columns (menu, content, google ads). Lets see you make the center column stretch to meet the users screen width while the two outsides columns remain a fixed width. When that is done lets see if these "table made out of divs" in the center column still layout correctly. They will not. Harder yet put both text and pics together in these tables.

Yet this can be done with the old table method.

#19
2008-06-06 Peter Ellerich says :

Would like to know if my yesterday's comment has been received.

#20
2008-08-25 UnknowN says :

good one ...can make a simple and nice calendar with this.. ;)

#21
2008-12-29 Ashi says :

good one ...can make a simple and nice calendar with this.. ;)

http://www.ashisoft.com

#22
2009-02-07 Chi says :

This is perfect for a data repeater control that I am using for my asp.net page. Much easier to produce this than with the tr and td tags. Thanks!

#23
2009-03-07 Deyon says :

thanks for this layout, as Chi said it is perfect for repeating data. I'm currently using it to set up a form. I will be back to send a link of the site when its done thanks for the code, I did not think this was so east to do in CSS.

#24
2009-04-16 Stephen says :

Well When I try to use it in my site it fucks everything up! But as soon as I disable my pager wrapper it kind of works except that it still fucks my entire design up. soz about the fuck word but it is the only one that can describe what is happening to my design

#25
2009-04-24 Shuvalof says :

Thanks.

But FLOAT not need in this case.

#26
2010-01-04 Tina says :

Nice Code, Working fine..
Thanks

#27
2010-05-30 rjcuk says :

Cheers for the code very happy Is it possible to vertically align the text fields in each of the div's so they align in the center vertically than at the top? Thanks smile

#28
2010-07-31 BlagoF says :

Cool

#29
2010-11-24 sameer says :

nice... but tell us more about it.

#30
2010-12-09 vineesh says :

hello sir
in css i just add a 5px width1000 px height div without any margin,but there seems a margin in top and bottom of the div how could i remove that..please advise

#31
2011-02-09 andrew says :

but what if the content of the is alot more for some cells, I believe it would not look so neat still?

#32
2011-03-26 Onanysunday says :

I am having the same problem as tinny how do i put it in code to tell the divs to go in horizontal line not vertical whenever i put something in a webpage it wants to go down the page not across

#33
2011-08-05 mehran tahir says :

hello,
i found this one very helpfully.it really solve my problem which i face from few days
thank you

#34
2011-09-20 vinayaka says :

hello,
Found this very useful.
Thank You

#35
2011-09-25 thusinhngheo123123 says :

thank you smile

#36
2011-10-30 JCrowe says :

Why do people need this page? Because it WORKS, it is easy to UNDERSTAND and although the page was written in 2005 it is relevant in 2011 and beyond. Thank you for taking the time to write the page and maintain it. I have bookmarked it for future use.

Thank you,
JCrowe

#37
2012-03-02 boris says :

I have a question. Is it possible to vertically align the text fields in I each of the div's so they align in the center?

ipad 3 keyboard

#38
2012-03-02 Barbara says :

thanks for this layout, as Chi said it is perfect for repeating data. I'm currently using it to set up a form.

#39
2012-03-20 ABCD says :

code is incomplete.....
it will not produce 3X3 table.., will only produce 1X9 matrix.
frown

#40
2012-08-21 ChuChu says :

Very Interesting approach, I used it effectively to make a left-fixed-panel, and the right scrollable. I am having difficulty putting buttons on the fixed panel, to position the scrollable to my anchor points.

#41
2013-04-16 JackLB says :

Cheers

#42
2013-05-08 ma9ic says :

Good for when it was written but now well out of date.

Comment form

Please type the word 'brown' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url