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