Why aren't my css div tables working?

[electricocean]

For some reason my code doesn't work... it doesn't work like a table with 2 columns. It recognizes 1 table and maked every thing in 1 column. Whats wrong?

html:
<link href="css/sheet.css" rel="stylesheet" type="text/css">

<table border="0"><tr><td>
<div id="container">
<div id="left">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="194" height="581">
<param name="movie" value="">
<param name="quality" value="high">
<embed src="" alt="Side Bar" name="sidebar" width="216" height="576" id="sidebar" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</p></div><div id="main"><p>some news<br>some news<br>some news<br>some news<br></p><p><a href="news_archive.php">News Archive</a></p>
</div></div></td></tr></table>
</body>
</html>

CSS:
table {
width: 100%;
height: 100%;
}

td {
vertical-align: middle;
text-align: center;
}

div.container {
position: relative;
margin: 0 auto;
width: 780px;
height: 432px;
text-align: left;
}

div.left {
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 432px;
}

div.main {
position: absolute;
top: 150px;
left: 200px;
width: 580px;
height: 432px;
}

[createErrorMsg]

The good news is this is going to be really easy for you to fix. ;)

html:
<div id="container">
css:
div.container {
position: relative;
margin: 0 auto;
width: 780px;
height: 432px;
text-align: left;
}

In your html, you use the id attribute for your <div>s, but in your CSS you use the dot (.) classname selector. For IDs, you want to use the hash mark (#) instead...

html:
<div id="container">
css:
div#container {
position: relative;
margin: 0 auto;
width: 780px;
height: 432px;
text-align: left;
}

Do that for all three <div>s and you should be fine.

cEM

[MatthewHSE]

If I may indulge in just a little good-natured nitpicking . . . ;)

You don't really create a "CSS div table" layout. A div and a table are two different elements for two different purposes. Yes, it sounds like arguing over semantics to say it like that, but one thing I had to come to grips with when I started using CSS layouts was that CSS-Positioning simply is not tables. If you're good you can get pretty much the same effect with one as with the other, but there's a very different mindset involved. With tables, you're thinking about your layout at the same time you write your markup. With divs and CSS-P, you're thinking about your page structure, then handle the layout later. It's a matter of perspective more than anything else, but it helps a lot.

[electricocean]

Thanks createErrorMsg,

It works now and everything is next to eachother, but everything is aligned on the bottom center- not vertical centering as shown in [quirksmode.org ]

also in FireFox the Div#Main is overlapping the Div#Left- Whats wrong?

Look at my site to see what I am talking about:
<No personal site specifics, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
electricocean

[edited by: SuzyUK at 9:49 am (utc) on Feb. 27, 2005]

[createErrorMsg]

electricocean, you might want to briefly review the WebmasterWorld TOS [webmasterworld.com]. Personal URLS are sort of disallowed here. Besides that, your posted code gives us enough to work with.

in FireFox the Div#Main is overlapping the Div#Left- Whats wrong?

The culprit here is this line in your code...

<embed src="" alt="Side Bar" name="sidebar" width="216" height="576" id="sidebar"...

Note that this <embed>ded element is set to 216px wide, but #main's left position is 200px. Try moving main over to 216px. Or, shrink the embedded object to 200px. Either one.

everything is aligned on the bottom center- not vertical centering

When I run your code I get vertical centering. I've had to replace your embedded <object> with a static div of the same dimensions, but otherwise it's the same and it looks fine. The #left div fills the whole height on the left side and the #main div is dead center in your table.

Are you using a valid doctype on your page? Is there a peice of code that is missing from your post, perhaps?

cEM

[edited by: SuzyUK at 9:52 am (utc) on Feb. 27, 2005]
[edit reason] fixed link [/edit]

[electricocean]

Thanks, the site in FireFox works now. But In safari, it's still not vertically centered.

<No personal site specifics, thanks. See TOS #13 [WebmasterWorld.com]>

If this is a person site I am sorry, but I just want to show you how it looks in my safari.

electricocean

[edited by: SuzyUK at 9:54 am (utc) on Feb. 27, 2005]
[edit reason] edit link to image [/edit]