Two-column layout

[Philipp E. Imhof]

Hi!

I am experiencing a problem with a two-column layout -- apparently I
am not the first person, but the solutions I found in GG did not
give me what I was looking for.

The page should be as follows:

................................
.. +----------+-------+ .
.. I Logo + sloganI .
.. +----+-----+-------+ .
.. I I I .
.. I N I I .
.. I I content I .
.. +----+ I .
.. I I .
.. I I .
.. I I .
.. +---------------+ .
................................

I want to have the main navigataion (N) on the left, expanding
downwards as much as necessary. The main content should be right of
the menu, taking the remaining space.

FIRST TRY:

I basically did this with individual floating DIVs and it worked OK
with just a "Lorem ipsum" in it. But as the content text grew
longer, the DIV was wrapped and placed below the navigation.

Well, this effect is OK, if there really is not enough space to hold
the content layer (i.e. on a handheld device). But in that case, it
would have been enough to do normal word-wrapping (there was at
least 66% of the screen width left).

SECOND TRY:

I then created a container layer (clear: both;), holding the
navigation (float: left; width in EM) and the content (margin in
EM). This works more or less. But now the problem is that the
content layer does never wrap, so with big font size the menu will
eat up all space and the page is not readable anymore.
So I am now looking for a method to tell the content layer: "Be as
wide as you can and, if you cannot be at least x EM wide, then go
down". The usage of min-width is OK, but the "as wide as you can"
does not work. Or, it would be nice to have some kind of "be 100%
minus the width of the navigation". Any help?
Thank you very much. Kind regards
Philipp

[Barbara de Zoete]

On Thu, 04 May 2006 12:38:28 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote:

The page should be as follows:

...............................
. +----------+-------+ .
. I Logo + sloganI .
. +----+-----+-------+ .
. I I I .
. I N I I .
. I I content I .
. +----+ I .
. I I .
. I I .
. I I .
. +---------------+ .
...............................

Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at the
left margin and fix its width (at say 8 em). There will remain a 2em gap
between your main content and your navigation. The content box is liquid
in so far that the width adapts to the width of the view port of the
browser. No need to go underneath the navigation. Or do I misunderstand
you?

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Philipp E. Imhof]

Barbara de Zoete schrieb:

Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at
the left margin and fix its width (at say 8 em). There will remain a 2em
gap between your main content and your navigation. The content box is
liquid in so far that the width adapts to the width of the view port of
the browser. No need to go underneath the navigation. Or do I
misunderstand you?

I tried this. The point is, that I *want* to go the content box
below the navigation, once it would be too small to be readable.
However, as long as it is large enough, I of course want to have it
next to the navigation.

I have already tried your variant. It worked, but with the
limitation that the content cannot go under the navigation anymore.

Maybe it is just impossible to do what I want, I don't know. For me,
it seems that the problem is the way the content box' width is
calculated. The browsers want to expand it more than necessary (I
think to 100%) and so it wraps.

But if I define a max-width of x%, there is another problem: Once
the content goes below the navigation (as I want it to), max-width
prevents it from filling out the entire width.

This is why I was looking for some expression telling the DIV that
it should be "*" wide (as with frames some years ago): (width minus
navigation), if not wrapped, and (width) when wrapped.

Philipp

[Barbara de Zoete]

On Thu, 04 May 2006 14:27:06 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote:

Barbara de Zoete schrieb:

Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at
the left margin and fix its width (at say 8 em). There will remain a 2em
gap between your main content and your navigation. The content box is
liquid in so far that the width adapts to the width of the view port of
the browser. No need to go underneath the navigation. Or do I
misunderstand you?

I have already tried your variant. It worked, but with the
limitation that the content cannot go under the navigation anymore.

In that case, create an empty box with exactly the same dimensions as the
nav box has, and float it underneath the nav box. Now, if the content is
too wide to fit next to the nav box (and the float that is underneath it),
it will move below. Ugly hack, but possibly useful.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Barbara de Zoete]

On Thu, 04 May 2006 14:43:59 +0200, Barbara de Zoete
<tr******@pretletters.net> wrote:

In that case, create an empty box with exactly the same dimensions as
the nav box has, and float it underneath the nav box.

Jus to be clear on this: by floating underneath, I mean into the exact
same spot, but with a lower z-index (or earlier in the pages markup).
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Philipp E. Imhof]

Barbara de Zoete schrieb:

In that case, create an empty box with exactly the same dimensions as
the nav box has, and float it underneath the nav box. Now, if the
content is too wide to fit next to the nav box (and the float that is
underneath it), it will move below. Ugly hack, but possibly useful.

Good idea. I did not know that this was possible.

Anyway, if I get it correctly, this will mean that if the content
moves below, there will always be the same margin on the left side.
In that case it could also stay next to the navigation... ;-)
Philipp

[Barbara de Zoete]

On Thu, 04 May 2006 15:20:33 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote:

Anyway, if I get it correctly, this will mean that if the content
moves below, there will always be the same margin on the left side.
In that case it could also stay next to the navigation... ;-)

Oops, my bad. With putting that extra empty float in the same spot as your
nav box, there is no need to set a margin on the content box. Just an
explicit min-width.

--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |

[Philipp E. Imhof]

Oops, my bad. With putting that extra empty float in the same spot as
your nav box, there is no need to set a margin on the content box. Just
an explicit min-width.

I tried it, but it would not work. Problems are:

- I cannot make the dummy box have exactly the same dimensions as
the navigation box, because the height is not known

- it does not resolve my problem with the madatory width for the
content, because it is still getting larger than necessary and will
wrap with no need
Too bad... :(

Regards

[Philipp E. Imhof]

Philipp E. Imhof schrieb:

Maybe it is just impossible to do what I want, I don't know. For me,
it seems that the problem is the way the content box' width is
calculated. The browsers want to expand it more than necessary (I
think to 100%) and so it wraps.

I changed my mind. There are just too many things I cannot predict,
so the layout will never be perfect anyway.

My solution is:

- for normal browsers, the content will never wrap. If someone
really wants to enlarge the font 10 times, it's his problem, not
mine and one cannot expect a perfect layout in such circumstances

- for handheld devices, I will define another style sheet where the
content "flows" around the navigation:

xxx ....
xxx ....
.........

or maybe one with the content below the navigation, I will see.

Thank you for your help. Maybe CSS 17 will allow to give "*" as
width-setting.

Regards

Philipp

[Jim Moe]

Philipp E. Imhof wrote:

I am experiencing a problem with a two-column layout -- apparently I
am not the first person, but the solutions I found in GG did not
give me what I was looking for.
Search for "two column css".
The page should be as follows:

. +----------+-------+ .
. I Logo + sloganI .
. +----+-----+-------+ .
. I I I .
. I N I I .
. I I content I .
. +----+ I .
. I I .
. I I .
. I I .
. +---------------+ .

This is a fairly simple layout. Using the techniques found in the search
should yield a good result.
Posting an URL would greatly assist us helping you.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Philipp E. Imhof]

Jim Moe schrieb:

Search for "two column css".

This is a fairly simple layout. Using the techniques found in the search
should yield a good result.
I'm afraid, it is not that simple. The two column layout is ok. The
problem is to control the wrapping and to have content go below
navigation in *some* cases.

CSS provides ways to

- never have it below navigation
- always have it below navigation
- have it below, if it is smaller than x%, *but* when below, it
will not expand to 100% anymore

but there seems to be no way for telling a DIV to eat up remaining
space, e.g.

- 100% - width_of_navigation when not wrapped
- 100% when wrapped

I changed my layout to something that can be coded in CSS/XHTML
*and* understood by current browsers.
Posting an URL would greatly assist us helping you.

Yes, you're right. I will do that tonight and post a link.

Regards

Philipp