Re: 2 column layout

In article <5o19bhFkbab6U1 (AT) mid (DOT) individual.net>,
Mark <user (AT) example (DOT) net> wrote:

Hi all

I would like to create a simple two column layout - navigation on the
left and content on the right. I would like the columns to have a fluid
width so they can grow and shrink according to the size of the text and
the browser window. However, I do not want the content column to span
the entire available width of the page (minus the navigation) if the
viewport resolution is such that the content column would end up having
very long lines. This is because I personally find narrow-ish columns
much more comfortable to read, and I'm sure this is a common view.

What is the best way to achieve what I want? Can I use some kind of
max-width style on the content column? If so, how do I specify the width
in CSS?

You could take a look at

<http://netweaver.com.au/test/leftNavFloated.html>

Play about with this to get the look you want. Notice the
max-width instruction on the content div, this is what limits the
problem you mention for most modern browsers.

For IE less than 7, which do not recognise this useful css
instruction, there are other strategies. One is the temptingly
brutal one of letting users of those 'on the way out anyway'
browsers cop it sweet (an Australian expression). Otherwise, you
can provide to make these IE browsers apply a width (just plump
for something reasonable like 40 or 50em, don't use pixels and
don't set font-size in anything but em or %) by either a hack (at
the end of the css sheet) like:

* html #content {width: 50em;}

or

in the html file, use a conditional that only IE understands to
tell it:

#content {width: 50em;}

You can alert IE6, for example, to this by putting this at the
end of the head section:

<!--[if IE 6]>
<style type="text/css">

#content {width: 50em;}

</style>
<![endif]-->

This fixes it for IE6. Not the best as it might not need to be so
wide. But it is at least not infinite and will limit things on
very big screens.

--
dorayme

Mark wrote:

I can do this easily by simply putting everything inside a wrapper div
and giving it a fixed width of 40em (say) but will this cause problems
for people with very small viewports?

Use max-width instead of width. I often use something like:

..wrapper {
width: 90%;
max-width: 40em;
margin: auto;
}

IE6 doesn't grok max-width, of course. There are ways around that, but
I'm less inclined to do anything about it these days since IE7 does
(mostly) support it.

--
Berg

In article <5o38n9FksojqU1 (AT) mid (DOT) individual.net>,
Mark <user (AT) example (DOT) net> wrote:

dorayme wrote:
In article <5o19bhFkbab6U1 (AT) mid (DOT) individual.net>,
Mark <user (AT) example (DOT) net> wrote:

Hi all

I would like to create a simple two column layout - navigation on the
left and content on the right. I would like the columns to have a fluid
width so they can grow and shrink according to the size of the text and
the browser window. However, I do not want the content column to span
the entire available width ...
What is the best way to achieve what I want? Can I use some kind of
max-width style on the content column? If so, how do I specify the width
in CSS?

You could take a look at

http://netweaver.com.au/test/leftNavFloated.html

Play about with this ...

For IE less than 7, which do not recognise this useful css
instruction, there are other strategies. One is ...

Hi dorayme

Thanks very much for your input.

I noticed one drawback with this method in that the navigation div has
to precede the content div in the document - is there a way around this?

Yes, there are solutions to this. Perhaps you would like to
follow:

<http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm>

Personally, I think it is not a clear drawback to have the
navigation first. There are arguments both ways. My view is that
since there are good arguments both ways and the matter is hard
to decide on the basis of them, just do whatever is simplest in
any given design.

Another problem I have is, I decided to add a header div that should
span the navigation and content divs, to achieve the layout below:

+-----------+
+header +
+--+--------+
| n| content|
| a| |
| v| |
+--+--------+

However, the header div will obviously span the width of the browser
window if its width is not constrained somehow but how do I make it
equal the two columns?

I can do this easily by simply putting everything inside a wrapper div
and giving it a fixed width of 40em (say) but will this cause problems
for people with very small viewports?

Bergamot has given a good answer on this as far as I can tell.
Which reminds me that a while back he posted an interesting
"dumbed down" version of a layout that you might be interested
in. I simply cannot find it quickly but I know I played about
with it a bit and have my version (probably with some
impurities?) and I am happy to post it for you (I will take it
down if the original reference is thought of):

<http://netweaver.com.au/test/bergamotColsNoFooter.html>

In a way, this layout has one major motive: of having "equal
length" columns independent of content driven heights. It is a
problem for some people that prefer not to use table layouts. But
this is another matter. It happens also to address in part your
interest in content first. It may appeal to you?

--
dorayme

In article <5o5ut5Fl727dU1 (AT) mid (DOT) individual.net>,
Mark <user (AT) example (DOT) com> wrote:

dorayme:
Mark:

dorayme:
Mark:

http://netweaver.com.au/test/bergamotColsNoFooter.html

In a way, this layout has one major motive: of having "equal
length" columns independent of content driven heights. It is a
problem for some people that prefer not to use table layouts. But
this is another matter. It happens also to address in part your
interest in content first. It may appeal to you?

It seems excellent in Firefox. However, it has problems in IE7, or
rather IE7 has problems with it:

http://www.lester1.eclipse.co.uk/screenshot.gif

This is triggered by resizing the browser window.

If I place a max-width rule on the container, do I then specify the
width of the navigation and content columns in %?

What container are you referring to?

I was surprised to see the rendering in IE7. Perhaps the design
was made before this browser came out. Special provisions were
made for IE6 if I recall. I suggest you click one of the links in
the bergamotColsNoFooter.html url - it is in the content of the
page - and go to the originator of the designs and see if he has
addressed the problems. Frankly, I don't think this design is for
you, it is a bit "tricky" and apparently, needs more tricks now.

Did you look at the other reference I gave

<http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm>

Pardon me if you said about this, I forget. Perhaps you could be
very careful about quoting, you have tended to quote the whole of
everything and I get lost.

--
dorayme