On Wed, 18 Nov 2009, Thomas Van Parys wrote:

Op 18-11-09 10:55, Kenny Billiau schreef:

...

Hi,

I'm trying to find a solution for following CSS problem: two columns and when resizing the window both of them need to resize. This is the same behaviour as when you'd put a two columned table at width:100% and each of it's columns at width:50% (or 40-60, or whatever ratio).

Anyone know how to do this in CSS?

First guess:

.col-left{ float: left; width: 50%; }

.col-right{ margin-left: 50%; width: 50%; }

to easy?

Well, it answers the question. but also have other constraints: - both have a max-width and a min-width option set. So at a certain point, both columns still overlap! :/ This is what I have so far that works: http://bioinformatics.psb.ugent.be/testix/CMS/trunk/splash/alt/ So, this one scales pretty nice. But now Yves asked me to make this work on 800*600 screens too. So this would be possible when I collapse the menu when there's no size. Any ideas about that instead? Kenny -- ================================================================== Kenny Billiau Web Developer Tel:+32 (0)9 331 36 95 fax:+32 (0)9 3313809 VIB Department of Plant Systems Biology, Ghent University Technologiepark 927, 9052 Gent, BELGIUM kenny.billiau@ugent.be http://bioinformatics.psb.ugent.be ================================================================== "When we have eachother, we have everything" - Douglas P.

Thomas Van Parys wrote:

Op 18-11-09 11:52, Kenny Billiau schreef:

...

On Wed, 18 Nov 2009, Thomas Van Parys wrote:

...

Op 18-11-09 10:55, Kenny Billiau schreef:

...

Hi,

I'm trying to find a solution for following CSS problem: two columns and when resizing the window both of them need to resize. This is the same behaviour as when you'd put a two columned table at width:100% and each of it's columns at width:50% (or 40-60, or whatever ratio).

Anyone know how to do this in CSS?

First guess:

.col-left{ float: left; width: 50%; }

.col-right{ margin-left: 50%; width: 50%; }

to easy?

Well, it answers the question. but also have other constraints: - both have a max-width and a min-width option set. So at a certain point, both columns still overlap! :/

This is what I have so far that works: http://bioinformatics.psb.ugent.be/testix/CMS/trunk/splash/alt/

So, this one scales pretty nice. But now Yves asked me to make this work on 800*600 screens too. So this would be possible when I collapse the menu when there's no size.

Any ideas about that instead?

Yeah... more JavaScript.

On every resize, you check the browser width. When it reaches a minimum, you let the menu slide away.

T.

perhaps it's just my browser, but there are still some other css-bugs: a) the "must-read" section doesn't display nicely (the text below "motivation" is not readable) b) icons van psb/ugent/vib staan lager dan dat van beg Michiel PS: browser is FF3.0.11 -- ================================================================== Michiel Van Bel PhD student Tel:+32 (0)9 331 36 95 fax:+32 (0)9 3313809 VIB Department of Plant Systems Biology, Ghent University Technologiepark 927, 9052 Gent, BELGIUM mibel@psb.vib-ugent.be http://www.psb.vib-ugent.be ================================================================== We are all in the gutter, but some of us are looking at the stars.