Multi-column layout with CSS

[Dave Boland]

All,

I'm doing a new layout for a tool that uses a web page as the user
interface. This layout will be two columns, 6 pages. I have been
playing with designs and reading things online, but I still have a few
questions if anyone can help.

First, there seems to be some debate about the best way to do a web page
- fixed width or variable (liquid) width. Most news sites seem to use
fixed width, and I likely will as well. What I would like to know is
what is the down-side and how important is it?

There also seems to be two ways to do multi-columns - absolute
positioning and floating. I have tried an example of both and don't
clearly see much advantage either way. What did I miss?

I'm hand coding everything so I learn what the heck I'm doing, but I
have to say, it is the long way to get a few pages done.

Thanks,
Dave

 

[dorayme]

All,

I'm doing a new layout for a tool that uses a web page as the user
interface. This layout will be two columns, 6 pages. I have been
playing with designs and reading things online, but I still have a few
questions if anyone can help.

First, there seems to be some debate about the best way to do a web page
- fixed width or variable (liquid) width. Most news sites seem to use
fixed width, and I likely will as well. What I would like to know is
what is the down-side and how important is it?

The downside of pixel fixed width for the guts of the site is that when
users want to take advantage of their nice new widescreen LCDs and
reduce their need to scroll, they can't and this stirs their emotions
from sad to dangerous.

Another is that when users use text sizes that the pixel fixed width
author was not expecting - fixed width brigade people tend to be a bit
blind to font-size usability issues. It goes with the territory usually
- text (headings and all) can break out or be cut off or be quite ugly
in its wrapping.

But a good author can guard against these dangers to some extent and
some pages can be safely fixed. Everything depends on the material and
the case.

There also seems to be two ways to do multi-columns - absolute
positioning and floating. I have tried an example of both and don't
clearly see much advantage either way. What did I miss?

Perhaps nothing, perhaps a lot. How about giving a URL of a page which
you personally find as easy to make one way as the other and folk here
might point out useful things to you.

I'm hand coding everything so I learn what the heck I'm doing, but I
have to say, it is the long way to get a few pages done.

If you make one page, the other five following the template should not
be too hard?

 

[Dave Boland]

Thanks dorayme. I read your thoughts about different monitors and
resolutions affecting fixed size. I use a 21 and 25 inch monitor and
two resolutions -- 1280x1024 and 1600x1200. I find that when web sites
of fixed size are coded from the left (not centered), I can just
decrease the size of the browser window and life is fine. Typically, I
don't want the browser window to be any larger than about half the
screen width so I can have other windows open. So I guess I don't see
this as a big issue as long as I code for a 800px width (like Yahoo and
others).

You did bring up something that I didn't think about -- the effect of
enlarging the font for people with vision problems. I agree that this
is very important. I'm going to play with the Yahoo and a few other
news sites to see how they do.

As for absolute vs. float for layout, I think I found an answer.
Absolute positioning makes having a footer difficult because the page
designer needs to know how large the columns will be so the footer isn't
way down the page. Since I like to design with the future in mind
(footer not needed now, but...), I will use a floating design.

Dave,

 

[David Segall]

I find that when web sites
of fixed size are coded from the left (not centered), I can just
decrease the size of the browser window and life is fine.

I don't understand this. Once you adjust your browser window to be the
same size as the web page what difference does it make to you how the
author justified the page in the window?

 

[dorayme]

I don't understand this. Once you adjust your browser window to be the
same size as the web page what difference does it make to you how the
author justified the page in the window?

OP is perhaps *imagining* that if he came across a fixed width site
centred, he would be left with an unremovable left wasted space whereas,
of course, as you know, the centring bit via margin: auto (or
text-align: center in some cases for IE) *is* the only fluid bit that
conveniently is user controllable.

 

[Neredbojias]

I don't understand this. Once you adjust your browser window to be the
same size as the web page what difference does it make to you how the
author justified the page in the window?

Perhaps the centering-reposition affect as the page width is reduced
causes him vertigo.

 

[dorayme]

Thanks dorayme. I read your thoughts about different monitors and
resolutions affecting fixed size. ...

You did bring up something that I didn't think about -- the effect of
enlarging the font for people with vision problems. I agree that this
is very important. I'm going to play with the Yahoo and a few other
news sites to see how they do.

I would not describe people who are not like young website makers with
20:20 vision (or better... there are such people!) as having 'vision
problems'. <g>

While checking something this morning, I came across a page that was
quite foolish in respect to this matter by someone who you would have
supposed would know better:

<http://www.headbank.co.uk/workshop/stretchpanels.htm>

Just look at how absolutely foolish this is, the fixed width is tiny,
that is pretty annoying in itself, frankly. And then, at my comfortable
text size, the display of the mark up (yes, I know, in <pre></pre>, it
does not excuse it.) spills out over the grey. Clearly, it never seemed
to occur to the webpage maker (author of article maybe or not?) to
bother looking at what happens to anyone but him on his machine. There
will be a *special penalty* for this cyberautism when I become ruler of
the world.

The main thing to be aware of is something very simple really. If a user
can make his text bigger or smaller independent of the pixel-sized
element box it is "in", then it cannot be guaranteed to stay inside that
box. One way the webpage maker can guarantee that text does always stay
in element boxes is to either

1. not specify the box in pixels,

2. not specify it at all (DIVs, for example, assuming no borders,
margins and padding, are 100% of their containing element, think browser
window, to simplify)

3. specify it in em units. em units are the language of font size. So,
if you specify a box as 20em wide, there is little chance that "Never
give a sucker an even break" won't fit in.

As for absolute vs. float for layout, I think I found an answer.
Absolute positioning makes having a footer difficult because the page
designer needs to know how large the columns will be so the footer isn't
way down the page. Since I like to design with the future in mind
(footer not needed now, but...), I will use a floating design.

Some people like their footers to really foot! Anyway, not that you
imply otherwise, float designs allow for both footers to appear just
after the content above or to go right down to the bottom of the
viewport (called sticky footers). And absolute positioning is a wizard's
game and there's not much that cannot be done with it in expert hands. I
would not advise using it all if you are a beginner.

 

[Dave Boland]

I don't understand this. Once you adjust your browser window to be the
same size as the web page what difference does it make to you how the
author justified the page in the window?

Some are centered in the page with both right and left borders for no
apparent reason. I see this on hobby pages, but all professional pages
(at least that I have seen) are left justified. So I don't need to
adjust both sides of the browser window. Simple enough?

Dave,

 

[Dave Boland]

OP is perhaps *imagining* that if he came across a fixed width site
centred, he would be left with an unremovable left wasted space whereas,
of course, as you know, the centring bit via margin: auto (or
text-align: center in some cases for IE) *is* the only fluid bit that
conveniently is user controllable.

I'm not imagining anything. I simply find centered pages annoying and
amateurish. You don't see that with professional pages. Also, if your
spelling is indicative of your web page prowess, then you really should
find another job.

Dave,

 

[Dave Boland]

Perhaps the centering-reposition affect as the page width is reduced
causes him vertigo.

No vertigo, just don't want to do a web page that looks like one you
armatures created it.

Dave,

 

[rf]

I'm not imagining anything. I simply find centered pages annoying and
amateurish. You don't see that with professional pages. Also, if your
spelling is indicative of your web page prowess,

And which particular spelling mistake might this be?

then you really should find another job.

Strawman argument alert.

 

[David Segall]

The main thing to be aware of is something very simple really. If a user
can make his text bigger or smaller independent of the pixel-sized
element box it is "in", then it cannot be guaranteed to stay inside that
box. One way the webpage maker can guarantee that text does always stay
in element boxes is to either

1. not specify the box in pixels,

Of course your statement is correct but I don't think that it is
necessarily wrong to specify a box in pixels. For example, the height
of the heading of <http://films.profectus.com.au> is specified in
pixels. I think it ensures that the heading makes sense over the range
of browser windows that I am targeting. I don't think that this is
possible using a different unit with the constraints I have explained
below.

[snip]
3. specify it in em units. em units are the language of font size. So,
if you specify a box as 20em wide, there is little chance that "Never
give a sucker an even break" won't fit in.

True, but it means that you must also use the browser to resize your
images. There is currently a convention that favours a fixed image
size because it loads faster. Do you think that the "average user" now
has the bandwidth needed to resize the images without a perceptible
delay.

 

[David Segall]

Some are centered in the page with both right and left borders for no
apparent reason. I see this on hobby pages, but all professional pages
(at least that I have seen) are left justified.

You lead a fortunate and sheltered life. Most professional web page
developers are obliged to periodically visit Microsoft's "hobby pages"

So I don't need to
adjust both sides of the browser window. Simple enough?

Yes, but I can make it even simpler. The Firefox Web Developer Add On
provides a "Resize to 1024 x nnnn" menu choice with a couple of clicks
and no adjustment. You can specify "nnnn" to match the height of your
viewport. 1024 is the current "standard" for a fixed width page. If
you don't use Firefox I am reasonably confident that someone here can
tell you how to add this functionality to your preferred browser.

 

[nice.guy.nige]

I'm not imagining anything. I simply find centered pages annoying and
amateurish. You don't see that with professional pages.

[...]

So, centered pages are only produced by amateurs and are not used on
professional pages?

A quick survey;

http://www.bbc.co.uk
http://www.microsoft.com
http://www.ubuntu.com
http://www.ibm.com
http://www.rolls-royce.com
http://www.number10.gov.uk
http://www.angloamerican.co.uk
http://www.ferrari.com

.... what a bunch of amateurs! ;-)

Cheers,
Nige

 

[dorayme]

I found your puzzlement perfectly unpuzzling and shared it. This
delightful reply by the OP deepens the mystery. But I have the solution.
He is a disembodied spirit with no actual practical experience.

The OP seems to think that when a box is fixed in the centre of a screen
in a browser on a wide enough monitor, a user keen to be rid of the two
useless sides must somehow perform two window resize operations. One to
get rid of the left unwanted and another to get rid of the right! He
perhaps thinks that just as there is a right bottom corner handle on
browsers, there must be a left.

Now, it is excusable for a disembodied spirit not to know about such
practical bodily things like mouse operations (it is a muscular affair,
it's lightness still way beyond the capabilities of a being with no
muscle at all). But there seems to be a misunderstanding about how
centring works in CSS. This is more serious!

 

[Eric Bednarz]

[…] a web page that looks like one you armatures created it.

^of ^r
You are welcome.

 

[dorayme]

Of course your statement is correct but I don't think that it is
necessarily wrong to specify a box in pixels.

I agree and was not meaning to imply otherwise. Indeed, it is sometimes
quite sensible to have a navigation col fixed. The downside of fixed is
that text can break out. The downside of em is that more screen space
than is strictly needed is taken up when text is big. It can also be
said that fixed width that has a built in buffer for text size
enlargement (e.g. 200px for links that are short and snappy, "About us")
is wasting space at small text sizes! It is all a matter of judgement in
the particular circumstances.

Now this needs to be understood right. If an author makes the words in
the links in the left navigation column reasonable short ones, he can be
more confident that none of them will break out except at *highly*
unlikely text sizes, they will wrap instead. And they may or may not
look good when wrapped. This is where the judgement comes in. If the
design and details don't lend to wrapping, then em is the way to go.

For example, the height
of the heading of <http://films.profectus.com.au> is specified in
pixels. I think it ensures that the heading makes sense over the range
of browser windows that I am targeting. I don't think that this is
possible using a different unit with the constraints I have explained
below.

Sure, I see it as sensible to have your #headerRight {...; height:
160px; ...} but here you have a rock solid argument, you need it to show
the nice background image! I don't quite see the justification for your
#headerLeft {...; height: 160px; ...} but I have not looked deeply.

[I was distracted by the material and started to muse about what would
have to have been the case for a film like I've loved you for so long"
which totally mesmerized me, to get 5 stars. I would happily give it
these! Thank you for attributing 4 stars on my behalf to Poppy, that is
about right! <g>

I have a criterion for judgement that I do not think is quite universal
among critics and it is a hard one to apply after only one viewing: how
well does the film stand up to repeated viewings? I doubt I could
actually watch Poppy more than a few times. I seemed to have no trouble
watching Witness over 25 times, or Big Country over 15 times or
Unforgiven more than I can count...]

[snip]

3. specify it in em units. em units are the language of font size. So,
if you specify a box as 20em wide, there is little chance that "Never
give a sucker an even break" won't fit in.

True, but it means that you must also use the browser to resize your
images. There is currently a convention that favours a fixed image
size because it loads faster. Do you think that the "average user" now
has the bandwidth needed to resize the images without a perceptible
delay.

I was mainly thinking of text. Not sure what you are referring to in
respect to images, bandwidth etc?

Sounds trite but I think one should only specify widths and heights when
needed! It is much less needed than might be thought.

 

[Doug Miller]

dorayme wrote:
I'm not imagining anything. I simply find centered pages annoying and
amateurish. You don't see that with professional pages.

You're certainly imagining that you have even the remotest semblance of a clue
regarding what a "professional page" is. ALL of the following are centered:

microsoft.com
ibm.com
dell.com
google.com
foxnews.com
cnn.com
whitehouse.gov
bbc.co.uk
toyota.com
pfizer.com

Also, if your
spelling is indicative of your web page prowess, then you really should
find another job.

My, but you truly do enjoy displaying your ignorance, don't you? Even a brief
glance at dorayme's email address would show you that she's posting from
Australia. This may come as a shock to you, but most parts of the
English-speaking world use British, not American, spellings, such as centre,
theatre, colour, flavour, etc.

 

[Doug Miller]

No vertigo, just don't want to do a web page that looks like one you
armatures created it.

<snort>
This, from the guy who flamed dorayme for spelling which was actually correct.

 

[Kevin Scholl]

... centered pages annoying and amateurish ... don't see that with professional pages.

Really? I'd say that's the single most common page orientation on the
Web. Yahoo, Google, Microsoft, Dell, Sun Microsystems, most of the
prominent news portals, etc. are all centered. Some sites are fluid,
expanding and collapsing dynamically to fit the browser width.

Adobe is one that is left-justified, but is clearly an exception to
the norm.

all professional pages (at least that I have seen) are left justified. So I don't
need to adjust both sides of the browser window.

(see above)

Why would you need to adjust both sides of the browser window? A
centered layout will remain centered as you collapse the browser width
from either side (unless the author has done something really, really
wonky with their code).