2 column layout

[Mark]

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?

[dorayme]

Re: 2 column layout

In article <5o19bhFkbab6U1 @mid.individual .net>,
Mark <user@example.n etwrote:

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.a u/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

[Bergamot]

Re: 2 column layout

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

[dorayme]

Re: 2 column layout

In article <5o5ut5Fl727dU1 @mid.individual .net>,
Mark <user@example.c omwrote:

dorayme:

Mark:

dorayme:
> Mark:

<http://netweaver.com.a u/test/bergamotColsNoF ooter.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 bergamotColsNoF ooter.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_con tentfirst.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