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

"Dan Rubin" <dan (AT) webgraph (DOT) com> wrote

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

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

Dan Rubin wrote:
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).

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