Re: 2 column layout

dorayme wrote:
In article <5o38n9FksojqU1@xxxxxxxxxxxxxxxxxx>,
Mark <user@xxxxxxxxxxx> wrote:

dorayme wrote:
In article <5o19bhFkbab6U1@xxxxxxxxxxxxxxxxxx>,
Mark <user@xxxxxxxxxxx> 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?

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

Relevant Pages

  • Re: 2 column layout
    ... Mark wrote: ... I would like to create a simple two column layout - navigation on the ... I noticed one drawback with this method in that the navigation div has ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Footer doesnt foot
    ... I'll modify your suggestion so it has a lot of material in the content div, and see what happens to the dummy menu. ... It must always go below the wrapper, *if* the wrapper *is made* to grow height for the float. ... You might be disappointed by the background of the body element showing up underneath the navigation, ... But if you start getting fussy about exactly where the footer should be, ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: equal height floated columns
    ... That limits your options to about nil as ABS positioning is the only CSS ... method that can be considered as suitable for creating a layout that is ... definitely need to have a DIV and float structure. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: 2 column layout
    ... I would like to create a simple two column layout - navigation on the left and content on the right. ... 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. ... Notice the max-width instruction on the content div, this is what limits the problem you mention for most modern browsers. ... One is the temptingly brutal one of letting users of those 'on the way out anyway' browsers cop it sweet. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: text between two images, floats the best?
    ... based layout to CSS. ... I took the out of the div ... appearance of centredness if you have enough text. ... *much* bigger right padding and the right a much bigger left ...
    (comp.infosystems.www.authoring.html)