using CSS instead of tables

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

David Schwartz - 07 Jul 2008 21:29 GMT

I'm trying to use CSS rather than a table. I've got content that I
would normally place in a 3-col, 1 row table. Instead, I wanted to
place each into its own <div> and use css to move them next to one
another. Here's what I've tried so far:

<div style="width:100%">
    <div style="width:33%">1111</div>
    <div style="float:right; width:33%">2222</div>
    <div style="float:right; width:33%">2222</div>
</div>

<div style="width:100%">
<div style="width:33%">1111</div>
<div style="float:right">
    <div style="width:33%">2222</div>
    <div style="float:right; width:33%">3333</div>
</div>
</div>

Neither of these gives me the effect I'm looking for (as a table
would).

Any help would be appreciated!

TIA,
David

Reply to this Message

Chris F.A. Johnson - 07 Jul 2008 22:04 GMT

> I'm trying to use CSS rather than a table. I've got content that I
> would normally place in a 3-col, 1 row table. Instead, I wanted to
[quoted text clipped - 17 lines]
> Neither of these gives me the effect I'm looking for (as a table
> would).

What effect are you looking for? Something like
<http://cfaj.freeshell.org/testing/xx2.html>, perhaps?

Signature

Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

Reply to this Message

Denis McMahon - 09 Jul 2008 04:07 GMT

> What effect are you looking for? Something like
> <http://cfaj.freeshell.org/testing/xx2.html>, perhaps?

That was useful, I have a similar but not quite the same problem.

Old style markup, set the table width to 100%, set the left column to
200 pixels, set the right column to 100%, right column is expanded to
take the available space.

How do I do this in CSS?

Especially when ie has a broken box model?

I'm wondering about using javascript to set div widths after page load,
but that looks really messy visually as the page loads and then
re-renders itself.

But it does mean that sniffing the browser and calculating element
widths myself according to viewport dimensions lets me fix the ie box
model issues that affect other parts of the document too.

Denis

Reply to this Message

dorayme - 09 Jul 2008 04:20 GMT

> > What effect are you looking for? Something like
> > <http://cfaj.freeshell.org/testing/xx2.html>, perhaps?
[quoted text clipped - 6 lines]
>
> How do I do this in CSS?

I recall messing about with various three col designs and this is still
at:

<http://netweaver.com.au/threeCols/fixed_both_sides.html>

Perhaps it might be useful to you?

Signature

dorayme

Reply to this Message

dorayme - 09 Jul 2008 07:13 GMT

In article
<doraymeRidThis-F6E014.13203309072008@news-vip.optusnet.com.au>,

> > > What effect are you looking for? Something like
> > > <http://cfaj.freeshell.org/testing/xx2.html>, perhaps?
[quoted text clipped - 13 lines]
>
> Perhaps it might be useful to you?

Sorry, it was 2 cols you wanted. Here is one experiment out of many:

<http://dorayme.890m.com/alt/twoCol.html>

It was an attempt to make a border between the left col and the main
that would not depend on the length of the content of either col, the
borders overlap guaranteeing a satisfactory divide. You can experiment
by filling either col to get the height advantage.

Of course, it does not solve every problem that can come up in practical
use.

Signature

dorayme

Reply to this Message

Bergamot - 09 Jul 2008 04:46 GMT

> Old style markup, set the table width to 100%, set the left column to
> 200 pixels, set the right column to 100%, right column is expanded to
> take the available space.
>
> How do I do this in CSS?

Run of the mill 2-column layout. There are oodles of templates out
there. Did you look?

> Especially when ie has a broken box model?

It's only broken if you use a DOCTYPE that triggers quirks mode. IE5
always runs in quirks mode, of course, but who cares?

Signature

Berg

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

using CSS instead of tables