I can do this with Tables, but how to do with CSS?

OK, I apparently am not as swift with CSS as I thought. I am trying to put
together a very light-weight page layout for our clients to use as a main
admin link page for projects (based on Jay Allen's layout for the same
purpose). I've got it looking the way I want it to look, but one element of
the layout is stumping me -- take a look:

http://webgraph.com/projects/cms/cp/

What I'd like to have is the two main columns (light green and light blue in
the example) resize along with the browser window (actually, relative to the
gray #frame div would be more precise), but I would like each column to stay
the same size as the other (same percentage if you will), while maintaining
a 10px margin between each column (right now, the right column is floated,
and when the browser window is resized larger, the gap widens; when resized
smaller than about 800x600, the gap disappears).

If I were doing this with tables, I wouldn't have to ask how, but I'm sure
this CAN be done with CSS, I just don't know how to do it.

Can anyone help? Would it help if I created a table-version to illustrate my
goal? Is this just not possible at all?

Thanks for your advice,

Dan
--
dan rubin

webgraph: branding | usability | design
<http://www.webgraph.com/>

re: I can do this with Tables, but how to do with CSS?

"Dan Rubin" <dan@webgraph.com> wrote in message
news:BB3B5814.20B44%dan@webgraph.com...[color=blue]
> http://webgraph.com/projects/cms/cp/
>
> What I'd like to have is the two main columns (light green and light blue[/color]
in[color=blue]
> the example) resize along with the browser window (actually, relative to[/color]
the[color=blue]
> gray #frame div would be more precise), but I would like each column to[/color]
stay[color=blue]
> the same size as the other (same percentage if you will), while[/color]
maintaining[color=blue]
> a 10px margin between each column (right now, the right column is floated,
> and when the browser window is resized larger, the gap widens; when[/color]
resized[color=blue]
> smaller than about 800x600, the gap disappears).
>[/color]
Try this:
* Put col1 before col2.
* Float col1 left.
* No float on col2. 10px margin-left on col2.
That looks ok to me, but you have to be the judge.

Some of your problem is mixing pixel and percent measurements.
40% + 43% + 30px = ? When it adds up to more then 100%,
your page will not display reasonably.

Good luck,
Steve

re: I can do this with Tables, but how to do with CSS?

> Dan Rubin wrote:[color=blue]
> What I'd like to have is the two main columns (light green and light
> blue in the example) resize along with the browser window (actually,
> relative to the gray #frame div would be more precise), but I would
> like each column to stay the same size as the other (same percentage
> if you will), while maintaining a 10px margin between each column
> (right now, the right column is floated, and when the browser window
> is resized larger, the gap widens; when resized smaller than about
> 800x600, the gap disappears).[/color]

Take a look at
http://home.wanadoo.nl/b.de.zoete/test/columns.html

with these styles for the two columns:
http://home.wanadoo.nl/b.de.zoete/test/columns.css

The trick seems to be to set positions fixed (left and right), set a fixed
width for each column that doesn't exceed 50% and than, to create a fixed
widht gap, set margins negative. So for a gap of 10px, set margin-left for
the left column to -5px. What helps is to define the width of the body as
100%. Not every browser seems to take that for granted.

Works in IE6 and OP7. Netscape needs a bit of playing around with a
combination of padding and margins.

Hope this helps.

--

Barbara

http://home.wanadoo.nl/b.de.zoete/index.html