CSS positioning VS tables

[S7even]

Should I even try to use CSS positioning alone to create the layout of a page, or I should stick to tables? I don’t care about old browsers, but it should look good with IE5+, NS6+ and the new versions of Opera and Mozilla. The layout will be rather complex.

Will there be any advantages if I use CSS only and no tables?

[jofa]

Tables should be used to mark up truly tabular information ("data tables").
W3C Web Content Accessibility Guidelines

=> using tables for layout is bad

[S7even]

Well, the matter is not only what is bad and what is good according to W3C. The matter is what works in reality and what doesn't. The ideal is to have something "good" that works. But if i had to choose between something good that doesn't work, and something "bad" that works in real life, then i would have to choose the second.

So the question remains: Is it possible to create complex layouts just with CSS that will look good with IE5+, NS6+ and the new versions of Opera and Mozilla? What will be the real world advantages of using only CSS and no tables?

[Aes]

Personally -- at least until Internet Explorer, Mozilla/Netscape, and Opera really begin to support standards equally -- I would use tables. They're still valid in the XHTML version, and will work with all browsers. If you have a complex layout and try to get it to work using only CSS and such, you're going to have a very difficult time.

-Colin

[bcp_2005]

Originally posted by Aes
Personally -- at least until Internet Explorer, Mozilla/Netscape, and Opera really begin to support standards equally -- I would use tables. They're still valid in the XHTML version, and will work with all browsers. If you have a complex layout and try to get it to work using only CSS and such, you're going to have a very difficult time.

Yes, I've found that out the hard way. I'm going to start experimenting with CSS layouts again just to see if I can figure out how to build conplex layouts with it. I've learned a lot since I've experimented with it before.

[brassfish1212]

I find css much more precise then tables

[RussellG]

As do I. I only use tables for tabular data also. My latest site (not my blog) was built using CSS for all the positioning...

[S7even]

can you show me some examples of layouts done with CSS only? I tried to do some, and there was no problem when the design was fixed. But when i tried to use percentages to make it liquid (resizable) I had some problems.

[randem]

Originally posted by S7even
can you show me some examples of layouts done with CSS only? I tried to do some, and there was no problem when the design was fixed. But when i tried to use percentages to make it liquid (resizable) I had some problems.

My latest site uses CSS only, and no tables. I don't know what you'd consider complex positioning.... I think it's all easy, so I guess it's relative.

[RussellG]

My latest site: http://www.ruraltech.info is done using css positioning. I have to fix it so it works in 800x600 though. Shouldn't be to hard.

[S7even]

Thanks for the examples. I will study them.

Russell, you have to fix it for resolutions above 1024x768 also. I am using 1280x1024 and the main part gets a bit messed up.

So, you can make anything that could be done with tables with just CSS, or there are some limitations/problems?

[Lister14]

taken from your example randem:

<div class="menu">
  <strong>This Site</strong>
  <a href="/">Home</a>
  <a href="/fun.php">Poetry Fun</a>
  <a href="/members.php">Poets</a>
  <a href="/search.php">Search</a>
  <a href="/faq.php">FAQs</a>
  <a href="/etiquette.php">Etiquette</a>
  <a href="/privacy.php">Privacy</a>
  <a href="/submissions.php">Submissions</a>
  <a href="/links.php">Links</a>
  <br />
</div>

i am trying to do something similar (but with a javascript inside the <div>), but i can't really get my head round it yet...
...for instance the positionings of the <div>s

it's alright to do them individually, and i even managed to put them above each other, but when i try to put them next to each other i seem to do something wrong

this is what an empty template looks like so far:
(bearing in mind that i keep the css somewhere else usually)

<html>

<head><title>test</title>

<style type="text/css">

<!--

p, body, h1, h2, a, th, td {	font-family: Veranda, Geneva, Arial, Helvetica, sans-serif;
				font-size: 12px;
			   }
h1 {	font-size: 16px;
	margin: 10, 10
   }
h2 {	font-size: 14px;
	margin: 0, 20 }
body { 	margin: 0, 150;
	text-align: justify}
p {	margin: 10, 10 }

p:first-letter {	font-size: 300%;
			float: left
		}
SPAN { text-transform: uppercase }

a:link, a:visited, a:hover {	font-family: Veranda, Geneva, Arial, Helvetica, sans-serif;
				font-size: 12px;
				font-weight: bold
			   }
a:link 		{ color: red;
		  text-decoration: none
		}
a:visited 	{ color: #069;
		  text-decoration: none
		}
a:hover 	{ color: #000000;
		  text-decoration: underline
		}

BODY {		background: #66CC99;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-right: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		
		SCROLLBAR-FACE-COLOR: #6699CC;
		SCROLLBAR-HIGHLIGHT-COLOR: #66cc99;
		SCROLLBAR-SHADOW-COLOR: #66cc99;
		SCROLLBAR-TRACK-COLOR: #66cc99;
		SCROLLBAR-BASE-COLOR: #6699CC;
		scrollbar-dark-shadow-color: #66CC99;
		scrollbar-3d-light-color: #6699CC
	}

something like this here(?):
#nav   {        height: 100%;
                width: 140px;   -->body px needs to reduce
                background: same as body;
                ...???;
        }

#main  {	height: 100%;
		width: 100%;
		float: right;
		border-top: 5px solid #69C;
		border-left: 15px solid #69C;
		border-right: 2px solid #69C;
		border-color: #69C;
		background: #fff;
		margin-bottom: 0px
	}

-->
</style>

</head>

<body>

<center>
 <font color="red">
  |: &nbsp;
   <a href="http://www.link1.com">Link1</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link2.com">Link2</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link3.com">Link3</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link4.com">Link4</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link5.com">Link5</a>
  :| &nbsp;
 </font>
</center>

<div id="main">

<center>
<hr width="75%">
 <font color="red">
  |: &nbsp;
   <a href="http://www.link1.com">Link1</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link2.com">Link2</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link3.com">Link3</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link4.com">Link4</a>
  &nbsp; :|: &nbsp;
   <a href="http://www.link5.com">Link5</a>
  :| &nbsp;
 </font>
</center>

</div>

</body>

</html>

on the left side, where the body has got 150px before the div starts, i'd like to insert another div, in order to put another javascript based navigation in

i have tried to put one <div> into the other, which didn't work...
...basically i am stuck with the #nav and where to place it

[randem]

I really don't understand what you're trying to accomplish, and my motto has always been "if it's hard, you're doing it wrong."

[RussellG]

Originally posted by S7even
Thanks for the examples. I will study them.

Russell, you have to fix it for resolutions above 1024x768 also. I am using 1280x1024 and the main part gets a bit messed up.

So, you can make anything that could be done with tables with just CSS, or there are some limitations/problems?

Thanks for the heads up!

Unless you are creating say, a memberlist or something similiar where you are using lots of columns and rows, then using <div>'s should be fine.