using CSS instead of tables

[David Schwartz]

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 <divand 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

[Chris F.A. Johnson]

On 2008-07-07, David Schwartz wrote:

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 <divand 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).

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

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

[Denis McMahon]

Chris F.A. Johnson wrote:

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

[dorayme]

In article <VX********************@newsfe18.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

Chris F.A. Johnson wrote:

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?

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?

--
dorayme

[Bergamot]

Denis McMahon wrote:

>
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?

--
Berg

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article <VX********************@newsfe18.ams2>,
Denis McMahon <de***********@ntlworld.comwrote:

Chris F.A. Johnson wrote:

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?

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?

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.

--
dorayme