CSS 3 column layout problem

Hi,

I'm trying to rework someone's site. The original was all done in lots
of tables by Dreamweaver. I'm trying to implement a CSS solution. The
site has 3 columns (200px, 400px, 200px) centred in the middle of the
screen regardless of screen size. I cannot find a CSS 3 column
equivalent of this. The usual solutions have the 2 200px columns
positioned absolutely and the centre column expands to fill all of the
remaining space. While this has advantages it does not match the
original site's appearance.

If anyone can point me to the fixed column width solution I'd be very
grateful.

Cheers

Deryck

Deryck

On Fri, 18 Aug 2006 13:41:26 +0100, Deryck wrote:
> I'm trying to implement a CSS solution. The
> site has 3 columns (200px, 400px, 200px) centred in the middle of the
> screen regardless of screen size. I cannot find a CSS 3 column
> equivalent of this. The usual solutions have the 2 200px columns
> positioned absolutely and the centre column expands to fill all of the
> remaining space. While this has advantages it does not match the
> original site's appearance.

That is because any good template author would reject the idea
of all three columns being a fixed width. If you find a template
that matches your specs, it is probably something you should
avoid.

If you insist on making a bad page, however, you can modify one of the
templates you describe so that it has a fixed width center of 400px.

#centerdiv {
...
...
...
width:400px;
...
...
}

mbstevens wrote:

>
> That is because any good template author would reject the idea
> of all three columns being a fixed width.

Out of curiousity, why?

>
> If you insist on making a bad page, however, you can modify one of the
> templates you describe so that it has a fixed width center of 400px.
>
> #centerdiv {
> ...
> ...
> ...
> width:400px;
> ...
> ...
> }


Thanks. I'd already tried that before posting though and I couldn't get
it to work. The left and right columns are positioned absolutely with
respect to the left and right hand sides of the screen. Your solution
will only work if the screen size is known in advance and everyone uses
the same screen size. I could position all 3 columns absolutely but then
the result would be positioned to the left (or right) of the screen
rather than centered.

Cheers

Deryck

On Fri, 18 Aug 2006 15:57:41 +0100, Deryck wrote:

> mbstevens wrote:
>
>>
>> That is because any good template author would reject the idea
>> of all three columns being a fixed width.
>
> Out of curiousity, why?


Open an 800 pixel fixed-width page with your browser. Now grab the bottom
right-hand corner with your mouse. Drag it across until the window is
about 600 pixels wide. That is what some of your visitors will see.
the will have to right-scroll to see across the page. Now drag it
until it is about 1200 pixels wide, if your screen will support it. That
is what some of your other visitors will see. It will be a tiny page in a
block of wasted screen space.

> Your solution
> will only work if the screen size is known in advance and everyone uses
> the same screen size. I could position all 3 columns absolutely but then
> the result would be positioned to the left (or right) of the screen
> rather than centered.

That is only more evil gas hissing up from fixed-width pages.
A page on the web cannot be designed as a magazine page is -- it must
instead be easily usable at any standard browser width. The only real
solution to that problem is liquid layout. Leaving default font size
unset helps, too.

I suggest you also look up about twenty or more back threads on this
newsgroup, and google for "frozen layout", "liquid layout", "flexible
layout", and "accessibility", and "usability". The regulars here have
gone through this too often for most of us to want to thrash through it at
length yet again.

mbstevens wrote:
> On Fri, 18 Aug 2006 15:57:41 +0100, Deryck wrote:
>
>> mbstevens wrote:
>>
>>> That is because any good template author would reject the idea
>>> of all three columns being a fixed width.
>> Out of curiousity, why?
>
>
> Open an 800 pixel fixed-width page with your browser. Now grab the bottom
> right-hand corner with your mouse. Drag it across until the window is
> about 600 pixels wide. That is what some of your visitors will see.
> the will have to right-scroll to see across the page. Now drag it
> until it is about 1200 pixels wide, if your screen will support it. That
> is what some of your other visitors will see. It will be a tiny page in a
> block of wasted screen space.
>

Let me phrase the question more precisely....

Why is it OK to fixed the width (and position) of 2 columns but not 3?
The problems illustrated in your examples will hold true when using a
3-column-with-2-fixed solution if the screen is small/large enough.

I have a 1900 pixel wide screen. Yes a central column that is 400px wide
results in unused (I wouldn't say wasted exactly) space BUT a 400px
column of text can be easier to read quickly than one 1500px wide (I
believe that's one of the reasons why newspapers use multi column output).

I'm not sure what either solution would look like on my Nokia 6630 with
its 176px wide screen.

>> Your solution
>> will only work if the screen size is known in advance and everyone uses
>> the same screen size. I could position all 3 columns absolutely but then
>> the result would be positioned to the left (or right) of the screen
>> rather than centered.
>
> That is only more evil gas hissing up from fixed-width pages.

I wasn't advocating it as a recommended solution

> A page on the web cannot be designed as a magazine page is -- it must
> instead be easily usable at any standard browser width.

s/cannot/should not/

Even if it's a dumb idea to do it this way, its what this client wants.
It can be done simply with 1 table tag, 1 tr tag, 3 x td tags. A fluid
solution in CSS requires a lot of code and a fixed solution seems to be
impossible. Whilst I have successfully removed a LOT of unneeded tags
and style I am annoyed that one table has to remain.

>
> I suggest you also look up about twenty or more back threads on this
> newsgroup, and google for "frozen layout", "liquid layout", "flexible
> layout", and "accessibility", and "usability". The regulars here have
> gone through this too often for most of us to want to thrash through it at
> length yet again.
>
Thank you for the suggestion.
I certainly wouldn't want you thrashing on my account When I
resubscrbed to this NG (after a year or 2's abscence) I didn't have time
to read the 4000 or so posts that Thunderbird offered to download, just
the FAQ. When time permits I'll check out the current thinking on liquid
layout.

Thanks for your help.


Cheers,

Deryck

On Sat, 19 Aug 2006 08:48:08 +0100, Deryck wrote:

> Why is it OK to fixed the width (and position) of 2 columns but not 3?

If the main center column is fluid, the page as a
whole can still expand and contract.

> The problems illustrated in your examples will hold true when using a
> 3-column-with-2-fixed solution if the screen is small/large enough.
>
> I have a 1900 pixel wide screen. Yes a central column that is 400px wide
> results in unused (I wouldn't say wasted exactly) space BUT a 400px
> column of text can be easier to read quickly than one 1500px wide (I
> believe that's one of the reasons why newspapers use multi column output).

I would imagine that anyone who ran their browser so wide would also have
their text size set large enough to negate this problem. Otherwise they
would have dead space in their browser displacing real estate on their
desktop on almost every page they visited.

>
> I'm not sure what either solution would look like on my Nokia 6630 with
> its 176px wide screen.

Web standards layout works on hand held computers better than tables.
It depends on the browser that the device is using, but columns are
can be allowed to appear one above the other instead of side by side,
making it unnecessary to do horizontal scrolling.

"Deryck" <> wrote in message
news:...
> Hi,
>
> I'm trying to rework someone's site. The original was all done in lots of
> tables by Dreamweaver. I'm trying to implement a CSS solution. The site
> has 3 columns (200px, 400px, 200px) centred in the middle of the screen
> regardless of screen size. I cannot find a CSS 3 column equivalent of
> this. The usual solutions have the 2 200px columns positioned absolutely
> and the centre column expands to fill all of the remaining space. While
> this has advantages it does not match the original site's appearance.
>
> If anyone can point me to the fixed column width solution I'd be very
> grateful.
>

Couldnt you define a wrapper div of 800px width then have 3 columns floated
within that wrapper? ie.

<style>
..wrapper{width:800px;}
..leftcol{float:left;width:200px}
..centercol{float:left;width:400px}
..rightcol{float:left;width:400px}
</style>

<body>
<div class="wrapper">
<div class="leftcol">something</div>
<div class="centercol">some more</div>
<div class="rightcol">even more</div>
</div>
</body>

--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info

Paul Watt wrote:
>
> Couldnt you define a wrapper div of 800px width then have 3 columns floated
> within that wrapper? ie.
>
>
<SNIP>

Thanks Paul, that looks like it might work

Cheers

Deryck

On 2006-08-19, Paul Watt wrote:
>
>
>
> "Deryck" <> wrote in message
> news:...
>> Hi,
>>
>> I'm trying to rework someone's site. The original was all done in lots of
>> tables by Dreamweaver. I'm trying to implement a CSS solution. The site
>> has 3 columns (200px, 400px, 200px) centred in the middle of the screen
>> regardless of screen size. I cannot find a CSS 3 column equivalent of
>> this. The usual solutions have the 2 200px columns positioned absolutely
>> and the centre column expands to fill all of the remaining space. While
>> this has advantages it does not match the original site's appearance.
>>
>> If anyone can point me to the fixed column width solution I'd be very
>> grateful.
>>
>
> Couldnt you define a wrapper div of 800px width then have 3 columns floated
> within that wrapper? ie.

Why would you wnat to? If you define the wrapper at 800px, it will
only work well in a window that is exactly 800px wide. If the
window is smaller, it will require horizontal scrolling; if it is
larger, there will be empty space.

Define the wrapper by percent (e.g., width:80%.

><style>
> .wrapper{width:800px;}
> .leftcol{float:left;width:200px}
> .centercol{float:left;width:400px}
> .rightcol{float:left;width:400px}
></style>
>
><body>
><div class="wrapper">
><div class="leftcol">something</div>
><div class="centercol">some more</div>
><div class="rightcol">even more</div>
></div>
></body>

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

"Chris F.A. Johnson" <> wrote in message
news:ah0kr3-...
> On 2006-08-19, Paul Watt wrote:
>>
>>
>>
>> "Deryck" <> wrote in message
>> news:...
>>> Hi,
>>>
>>> I'm trying to rework someone's site. The original was all done in lots
>>> of
>>> tables by Dreamweaver. I'm trying to implement a CSS solution. The site
>>> has 3 columns (200px, 400px, 200px) centred in the middle of the screen
>>> regardless of screen size. I cannot find a CSS 3 column equivalent of
>>> this. The usual solutions have the 2 200px columns positioned absolutely
>>> and the centre column expands to fill all of the remaining space. While
>>> this has advantages it does not match the original site's appearance.
>>>
>>> If anyone can point me to the fixed column width solution I'd be very
>>> grateful.
>>>
>>
>> Couldnt you define a wrapper div of 800px width then have 3 columns
>> floated
>> within that wrapper? ie.
>
> Why would you wnat to? If you define the wrapper at 800px, it will
> only work well in a window that is exactly 800px wide. If the
> window is smaller, it will require horizontal scrolling; if it is
> larger, there will be empty space.
>
> Define the wrapper by percent (e.g., width:80%.
>

The only reason for defining the wrapper as 800px and not going for a fluid
percentage is that the OP specifically said he wanted the cols to be
200px,400px and 200px.
Whether this is the best way to design pages is another thing all together.


--
Cheers

Paul
le singe est dans l'arbre
http://www.paulwatt.info





>><style>
>> .wrapper{width:800px;}
>> .leftcol{float:left;width:200px}
>> .centercol{float:left;width:400px}
>> .rightcol{float:left;width:400px}
>></style>
>>
>><body>
>><div class="wrapper">
>><div class="leftcol">something</div>
>><div class="centercol">some more</div>
>><div class="rightcol">even more</div>
>></div>
>></body>
>
> --
> Chris F.A. Johnson <http://cfaj.freeshell.org>
> ================================================== =================
> Author:
> Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)