CSS 3 column layout problem

[Deryck]

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

 

[mbstevens]

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;
...
...
}

 

[Deryck]

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

 

[mbstevens]

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.

 

[Deryck]

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.

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

 

[mbstevens]

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.

 

[Paul Watt]

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

 

[Deryck]

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

 

[Chris F.A. Johnson]

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

 

[Paul Watt]

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