Stylesheets - 2 column layout

Author

2 column layout

Mark

2007-10-21, 6:17 pm

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

2007-10-21, 6:17 pm

In article <5o19bhFkbab6U1@mid.individual.net>,
Mark <user@example.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:



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

2007-10-22, 6:18 am

dorayme wrote:
> In article <5o19bhFkbab6U1@mid.individual.net>,
> Mark <user@example.net> wrote:
>
>
> 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:
>
> 
>
> 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.

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?

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

2007-10-22, 6:18 pm

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

2007-10-22, 6:18 pm

In article <5o38n9FksojqU1@mid.individual.net>,
Mark <user@example.net> wrote:

> dorayme wrote:
[color=darkred]
>
> 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

Mark

2007-10-23, 6:16 am

dorayme wrote:
> In article <5o38n9FksojqU1@mid.individual.net>,
> Mark <user@example.net> wrote:
>
>
>
> 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.
>
>
> 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?

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 %?

dorayme

2007-10-23, 6:17 pm

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

> dorayme:
>
> 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