Three-column website layout?

[Ikke]

Hi everybody,

I'm looking for a very simple three-column website design in css.

All the examples I've found so far are talking about hacks, tricks and
other difficult stuff.

The only thing I need, is a simple layout where the left and right column
are of a fixed width, and the center needs to stretch between them so the
entire page is filled.

I've only recently stopped using tables and started using css for layout,
so basically I find it hard to believe that this could be so hard.

Could someone please point me to some examples, or websites that employ
such a layout (in an easy fashion)?

Thanks!

Ikke

 

[dorayme]

Hi everybody,

I'm looking for a very simple three-column website design in css.

All the examples I've found so far are talking about hacks, tricks and
other difficult stuff.

The only thing I need, is a simple layout where the left and right column
are of a fixed width, and the center needs to stretch between them so the
entire page is filled.

I've only recently stopped using tables and started using css for layout,
so basically I find it hard to believe that this could be so hard.

Could someone please point me to some examples, or websites that employ
such a layout (in an easy fashion)?

Thanks!

Ikke

Gee, old B is always suggesting a link for this... where is
it...? Anyway, perhaps

http://bluerobot.com/web/layouts/layout3.html

is too tricky?

Or

http://www.glish.com/css/7.asp

Or just float a div left and right, give them a width in px, and
give the main content div no width but certainly right and left
margins in which the floats sit. Don't position anything at all
under this suggestion. And then come and complain about the
details. It will be a valuable thread. Start very simply and
complain loudly at the first sign of trouble (before you
introduce tons and tons of complexity)

 

[Ikke]

Gee, old B is always suggesting a link for this... where is
it...? Anyway, perhaps

http://bluerobot.com/web/layouts/layout3.html

is too tricky?

I've seen that page before. The first thing that immediately jumps out of
the CSS at that page, are the words "ugly" and "hack". So yes

Or

http://www.glish.com/css/7.asp

Another page I've seen, which employs a hack.

Or just float a div left and right, give them a width in px, and
give the main content div no width but certainly right and left
margins in which the floats sit. Don't position anything at all
under this suggestion. And then come and complain about the
details. It will be a valuable thread. Start very simply and
complain loudly at the first sign of trouble (before you
introduce tons and tons of complexity)

Basically, that's how I started out - a left column, right column, and a
center one with no width specified.

It all works fine when the widths are in percentages - but as soon as I
set the widths left and right in pixels, and drop the width of the center
column, the right column drops beneath the center.

Why all this talk about complaining? Is it really that hard to get a
three column layout? Is it really necessary to employ hacks? If that's
the case, why does everybody insist on using css instead of tables
(besides the fact that that's how its supposed to be and
blahblahblah...).

Thanks for your reply,

Ikke

 

[Beauregard T. Shagnasty]

Hi everybody,
G'day.

I'm looking for a very simple three-column website design in css.

Like this?
http://benmeadowcroft.com/webdev/csstemplates/3-column.html

All the examples I've found so far are talking about hacks, tricks and
other difficult stuff.

Tricks maybe, but "hacks" aren't necessary, and it is not difficult,
only different.

The only thing I need, is a simple layout where the left and right
column are of a fixed width, and the center needs to stretch between
them so the entire page is filled.

See above.

I've only recently stopped using tables and started using css for
layout, so basically I find it hard to believe that this could be so
hard.

It is not hard. It is just a different mindset, or method. Once you
catch on, and drop tables for layout, you will wonder why you didn't do
it years ago. CSS layouts are sooo much easier to maintain.

 

[Beauregard T. Shagnasty]

Gee, old B is always suggesting a link for this... where is
it...?

Am I "old B"?

Link posted. <g>

 

[Beauregard T. Shagnasty]

Why all this talk about complaining?

The only people who complain are those who can't comprehend the change
of method.

Is it really that hard to get a three column layout?
Is it really necessary to employ hacks?

No and No.

 

[BootNic]

news: (e-mail address removed)
[snip]
http://www.glish.com/css/7.asp

[snip]

This is a 3 column layout, however I do not think it should be referred
to as "the holy grail".

http://www.alistapart.com/articles/holygrail

--
BootNic Sunday, October 29, 2006 7:45 PM

"They may forget what you said, but they will never forget how you
made them feel."
*Carl W. Buechner*

 

[dorayme]

Why all this talk about complaining?

I was intending this in a friendly way, meaning only to start
simple, show us the result with a url with a "complaint" ie. a
description of something you find unacceptable (eg, a float drop
when you squeeze the window less wide... etc) and folk here can
suggest solutions to address these matters... In this process, a
url would help...

 

[dorayme]

Am I "old B"?

Link posted. <g>

Yes, you are!

And yes that's the one, I have re bookmarked it as "3-col layout
css beauregard". No wonder my "Spotlight" search could not find
it before - it was there but not under a good name. I am coming
to more and more rely on this search business on my computer.
Long gone, it seems, are the days when I remember pretty well
where everything is.

 

[Andrew]

Hi everybody,

I'm looking for a very simple three-column website design in css.

All the examples I've found so far are talking about hacks, tricks and
other difficult stuff.

The only thing I need, is a simple layout where the left and right column
are of a fixed width, and the center needs to stretch between them so the
entire page is filled.

I've only recently stopped using tables and started using css for layout,
so basically I find it hard to believe that this could be so hard.

Could someone please point me to some examples, or websites that employ
such a layout (in an easy fashion)?

Thanks!

Ikke

Hi Ikke,

I am very much a beginner at such layouts but I have produced a very
simple 3 column layout that could serve as a starting point:

http://www.andrews-corner.org/3_column_header_footer.html

There are no hacks, tricks or other devices and the page adapts to
all browser window sizes. HTML and CSS validate with W3C.

All the best,

Andrew.

 

[Ikke]

I was intending this in a friendly way, meaning only to start
simple, show us the result with a url with a "complaint" ie. a
description of something you find unacceptable (eg, a float drop
when you squeeze the window less wide... etc) and folk here can
suggest solutions to address these matters... In this process, a
url would help...

Ah... Sorry, my paranoia self took it a bit harsher than it sounded.

Thanks for your help!

Ikke

 

[Ikke]

news: (e-mail address removed)
[snip]
http://www.glish.com/css/7.asp

[snip]

This is a 3 column layout, however I do not think it should be referred
to as "the holy grail".

http://www.alistapart.com/articles/holygrail

Thanks for the link! It looks very nice, but again there is an exception
for IE6

Ikke

 

[Ikke]

Hi Ikke,

I am very much a beginner at such layouts but I have produced a very
simple 3 column layout that could serve as a starting point:

http://www.andrews-corner.org/3_column_header_footer.html

There are no hacks, tricks or other devices and the page adapts to
all browser window sizes. HTML and CSS validate with W3C.

All the best,

Andrew.

Hi Andrew,

Now this looks like the thing I'm looking for - thanks for posting the
link!

Ikke

 

[Jonathan N. Little]

Thanks for the link! It looks very nice, but again there is an exception
for IE6

Hey in a perfect world IE would be a compliant browser! 'Tis why in
general web designers do not like IE.

 

[Ikke]

Hey in a perfect world IE would be a compliant browser! 'Tis why in
general web designers do not like IE.

I know. But sadly it is still the most popular browser at this moment, and
that means that one needs to take into account that the website needs to be
displayed correctly in it.

Also, one should not ignore the fact that clients usually add IE5.5 as the
minimum browser requirement for a website - I've even had clients who
specifically asked me to limit the website to IE users (don't ask why).

Thanks,

Ikke

 

[Beauregard T. Shagnasty]

I know. But sadly it is still the most popular browser at this
moment, and that means that one needs to take into account that the
website needs to be displayed correctly in it.

I find that I have no trouble writing pages that display properly in all
browsers, so long as I don't try for the unobtainable 'pixel perfect'
layout, and don't use any kind of (any) browser-specific code.

I don't care if one browser has .. oh .. a three-pixel difference in a
margin somewhere. Design a flexible layout and that is not an issue.

Also, one should not ignore the fact that clients usually add IE5.5
as the minimum browser requirement for a website - I've even had
clients who specifically asked me to limit the website to IE users
(don't ask why).

Tell those clients to find a developer who works exclusively in ActiveX.
Be sure to mention that he might as well turn off the web server for
about two or three months every year - as that is about how much
business he will lose with an IE-only site.

What *is* it with some of these clients? If they know so much, why don't
they write their own sites? My clients came to me because they don't
know anything about designing web sites.

 

[dorayme]

Now this looks like the thing I'm looking for - thanks for posting the
link!

You will soon find the need for things that you may describe as
tricks (maybe not hacks) as soon as you put in some real content,
pics, diags and so on. Many templates behave well with just text
and especially for normal sighted people. There are issues
surrounding this em-margined layout concerning the desirability
of the content being squeezed at large font sizes.

The issues go on and on... (we cannot discuss them too
enthusiastically here because Travis might be sick of it...

 

[dorayme]

My clients came to me because they don't
know anything about designing web sites.

Me too mainly, thank God. If they know anything, they

(a) Don't pay me and
(b) Send men around to beat me up badly.

 

[Andrew]

Hi Andrew,

Now this looks like the thing I'm looking for - thanks for posting the
link!

Ikke

Hi Ikke,

Glad this will be useful to you. Of course the template represents a
very basic beginning only and will no doubt need to be modified as
content is added.

Andrew.

 

[Andrew]

On Tue, 31 Oct 2006 07:42:46 +1100, dorayme

snip>>>>>>>>.

snip>>>>>>>>>>>.

You will soon find the need for things that you may describe as
tricks (maybe not hacks) as soon as you put in some real content,
pics, diags and so on. Many templates behave well with just text
and especially for normal sighted people. There are issues
surrounding this em-margined layout concerning the desirability
of the content being squeezed at large font sizes.

snip>>>>>>>>>>>

Hi Dorayme,

Do you think that this particular template would be better served
with the width in px rather than em for the flanking columns? I have
seen this done almost as a convention in other sites, but it seems to
often break the layout at more extreme text resizing. I guess this has
to balance against the content being squeezed, as you mentioned.

I am using these templates as a learning tool for myself, perhaps I
should not have proffered it as an example until I am a little more
sure of myself

All the best,

Andrew