CSS Troubles

@Phill_PaffordMay 08.2007

Hi all,

Newbie at CSS, But learning

I need to know how to create a table based layout but with div.

Table Example;

[CODE] <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> [/CODE]

Now how do I do it with Div?

when I try it just lists everything in one line like this

[CODE] <table> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> <tr> <td></td> </tr> </table> [/CODE]

no new row, how can I get the same look as a table based layout?

Also the data going into the div table varies in size, some fields might have 6 characters, some 25. so it also needs to look right .

Any help would be great

to post a comment

CSS

3 Comments(s) _↴

@felgallMay 08.2007 — #Look at your content and apply the appropriate HTML tags for what that content is first. Second you apply the CSS to those tags to position the content where you want. Only if you can't position everything correctly using the appropriate tags that are already there should you add div tags. So with no content in the table you need no div tags and no CSS.

It is the CONTENT that is the important part for the conversion away from tables and not the table structure which is absolutely meaningless.

@KeveyMay 08.2007 — #I don't know a lot about tables, so I hope this is helpful:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en-US">
 <head>
 <title>a cool title</title>
 <meta name="description" content="my content" >
 <meta name="keywords" content="overline, underline, something else" >
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
 <style type="text/css">
 #left {float:left; width:12%; color: #fff; background:#000;text-align:center;border: 1px solid #fff;}
 #center {float:left; width:12%; background: #2cb34a;text-align:center;border: 1px solid #fff;}
 #right {float:left; width:12%; color:#fff; background: #3f07bf;text-align:center;border: 1px solid #fff;}
 #right2 {float:left; width:12%; background: #ccc;text-align:center;border: 1px solid #fff;}
 p {font-size:90%;border: 1px solid #fff;margin:0; padding:5px;}
 </style>
 </head>
 <body>
 <div id="left">
 <p>this is the left div</p>
 <p>this is the left div</p>
 <p>this is the left div</p>
 <p>this is the left div</p>
 </div>
 
 <div id="center">
 <p>this is the center div</p>
 <p>this is the center div</p>
 <p>this is the center div</p>
 <p>this is the center div</p>
 </div>
 
 <div id="right">
 <p>this is the right div</p>
 <p>this is the right div</p>
 <p>this is the right div</p>
 <p>this is the right div</p>
 </div>
 
 <div id="right2">
 <p>this is the right2 div</p>
 <p>this is the right2 div</p>
 <p>this is the right2 div</p>
 <p>this is the right2 div</p>
 </div>
 </body>
 </html>[/CODE]

@KeveyMay 08.2007 — #Here's another more colorful version...yep, bored at work. :rolleyes:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en-US">
 <head>
 <title>a cool title</title>
 <meta name="description" content="my content" >
 <meta name="keywords" content="overline, underline, something else" >
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
 <style type="text/css">
 body {background: #c0d435; padding-top:30px;}
 .left {width:198px; float:left;color: #fff; background:#000;text-align:center;border: 1px solid #fff;}
 .center {width:198px;float:left;background: #2cb34a;text-align:center;border: 1px solid #fff;}
 .right {width:198px;float:left;color:#fff; background: #3f07bf;text-align:center;border: 1px solid #fff;}
 .right2 {width:198px;float:left;background: #ccc;text-align:center;border: 1px solid #fff;}
 p {font-size:90%;border: 1px solid #fff;margin:0; padding:5px;}
 h1, h2 {padding:5px;}
 #wrap {
 background :#c0d435; text-align:center; margin: 0 auto; width:800px;
 }
 .header {width:800px; background:red; height:50px; clear:both;}
 </style>
 </head>
 <body>
 <div id="wrap">
 <div class="header"><h1>TABLE TITLE OR WHATEVER</h1></div>
 <div class="left">
 <h2>COLUMN A</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="center">
 <h2>COLUMN B</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="right">
 <h2>COLUMN C</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="right2">
 <h2>COLUMN D</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="header"><h1>HERE IS THE NEXT TABLE</h1></div>
 <div class="left">
 <h2>COLUMN A</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="center">
 <h2>COLUMN B</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="right">
 <h2>COLUMN C</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 
 <div class="right2">
 <h2>COLUMN D</h2>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 <p>text text text</p>
 </div>
 </div>
 </body>
 </html>[/CODE]

Also in #CSS _↴

[RESOLVED] Where is the underscore coming from?Width percentages and spaces when floating left IFRAME border showing in IE7

Success!

Help @Phill_Pafford spread the word by sharing this article on Twitter...

Tweet This

CSS Troubles

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Troubles

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴