CSS and tables

[bcc1234]

Hi, is it safe to use styles and tables?

Something like:
...
<td>
<div style="position:absolute;...
</div>
</td>

Or should I only use relative inside the cells?

[Nick_W]

Safe but, useless!

If you're going to position a div, why plonk it in a table?

Nick

[bcc1234]

If you're going to position a div, why plonk it in a table?

I need several vertical lines and there is no way to predict the height of the page.

Take a look at the site in my profile.
It's currently designed with tables, but I want to redo it in css to reduce the size of html.

The problem is that if I use divs - then the left, right and the bottom elements are messed up because I don't know the amount of content in the middle in advance.

[madcat]

Hey-

then the left, right and the bottom elements are messed up because I don't know the amount of content in the middle in advance.

If I understand you correctly...

CSS is tailored for just that, not knowing what content is going to fill your <div>s (auto). Layouts should be fluid, not fixed. I dig your site but you might want to think about organizing your information in a different way using CSS- You'll learn quite a bit along the way.

M

[bcc1234]

madcat, can you explain a bit more about making the layout?
Last time I did any html was when dhtml was considered a bad new thing not supported by most of the visitors' browsers.

[madcat]

Let me point you to a few resources that you'll find helpful. Forget about having to use a million &nbsp; or blank spacer images and FONT, you can correctly use margins and padding to arrive at the same 'look'. It's worth the effort if you're ready to make the jump.

w3 schools [w3schools.com]
Blue Robot [bluerobot.com]
Glish (Go to CSS layout techniques) [glish.com]
Westciv (Might be best to start here...) [westciv.com]
More basic CSS [mako4css.com]

Excellent books:
Eric A. Meyer CSS [amazon.com]
CSS: Separating Content From Presentation [amazon.com]

Work through all of these and then go here:
Box Lessons [thenoodleincident.com]

As far as the layout is concerned, after you go through some of these tutorials, your columns should naturally fall into a one <div> row spanning the length of the page...then three fluid column <div>s for the page content. (columns and rows are actually <div>'s, not table cells) which you'll soon see. Also, a footer <div> for bottom navigation and copyright information.

The insides of those <div>'s can be filled with any combination of boxes and borders to organize your content.

M

[bcc1234]

As far as the layout is concerned, after you go through some of these tutorials, your columns should naturally fall into a one <div> row spanning the length of the page...then three fluid column <div>s for the page content. (columns and rows are actually <div>'s, not table cells) which you'll soon see. Also, a footer <div> for bottom navigation and copyright information.

After about a week of trying to do this I gave up.

I checked the results with IE 5.5, Mozilla 1.1, Opera 5.0, NN 4.76.

All screw it up in different ways as soon as the layout become any more complex than 3 or nested 4 divs with a mix of variable and fixed widths.

I'm sticking with tables for a few more years I guess :)

[madcat]

I checked the results with IE 5.5, Mozilla 1.1, Opera 5.0, NN 4.76.

See, don't expect NN 4.76 to comply with your needs. It's not going to happen. Use @import if you can afford it.

[madcat]

I'm sticking with tables for a few more years

Oh, the Humanity! ;)