equal height floated columns

[zzpat]

I've come to the conclusion that float was never made for designing a
page, but is there a good way to float three columns with the following
characteristics?

leftColumn 20%
rightColumn 20%
centerColumn use what's left

I'm currently defining centerColumn as a %, but to get this to work
properly the margin, padding and border settings have to be exactly the
same in both left and rightColumns. Talk about a pain.

Height in all three columns should equal 100% and I'm no where near
finding a solution.

The optimum solution wouldn't include absolute positioning, tables,
images or 1000 hacks.

[Spartanicus]

zzpat <zz*******@gmail.comwrote:

>I've come to the conclusion that float was never made for designing a
page

Correct, assuming that by "designing a page" you mean create a layout.
Not that "not made for" should matter if a CSS method does a good job
for whatever other purpose you want to put it to. But that's not the
case here, floating causes a raft of problems when it is abused to
create a "CSS layout".

>, but is there a good way to float three columns with the following
characteristics?

I presume you intended the write something like "create" instead of
"float". CSS 2.x has quite limited options to create a layout and it
doesn't offer anything specifically designed for that purpose.

>leftColumn 20%
rightColumn 20%
centerColumn use what's left

I'm currently defining centerColumn as a %, but to get this to work
properly the margin, padding and border settings have to be exactly the
same in both left and rightColumns.

There are no such limitations.

>Height in all three columns should equal 100%

100% of what?

>and I'm no where near
finding a solution.

Did you check the many CSS layout templates that are out there?

>The optimum solution wouldn't include absolute positioning

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
also supported by IE. Why are you poised against ABS positioning?

--
Spartanicus

[Andy Dingley]

On 16 Mar, 17:14, zzpat <[e-mail]:

I've come to the conclusion that float was never made for designing a
page, but is there a good way to float three columns with the following
characteristics?

Use a <table>

(Equal heights imply a coupling between columns that's only
expressible in HTML by use of the <tableelement.)

[zzpat]

Andy Dingley wrote:

On 16 Mar, 17:14, zzpat <[e-mail]:

>I've come to the conclusion that float was never made for designing a
page, but is there a good way to float three columns with the following
characteristics?

Use a <table>

(Equal heights imply a coupling between columns that's only
expressible in HTML by use of the <tableelement.)

What's your opinion on floating an entire column within a table?

I've never actually floated a column in a table so I'm not aware of the
problems that might occur. Are there many?

I'm most likely looking at floating three columns; left, center and
right as mentioned previously but would you do away with float or keep it?

[Ben C]

On 2007-03-16, zzpat <zz*******@gmail.comwrote:

Andy Dingley wrote:

>On 16 Mar, 17:14, zzpat <[e-mail]:

>>I've come to the conclusion that float was never made for designing a
page, but is there a good way to float three columns with the following
characteristics?

Use a <table>

(Equal heights imply a coupling between columns that's only
expressible in HTML by use of the <tableelement.)

What's your opinion on floating an entire column within a table?

So long as it's within a table cell there's no problem. Don't just put a
floated element in a <table>, and don't float a <td>.

I've never actually floated a column in a table so I'm not aware of the
problems that might occur. Are there many?

Should be fine.

I'm most likely looking at floating three columns; left, center and
right as mentioned previously but would you do away with float or keep it?

It won't really help with making all the columns the same height. Make
each column a <td>.

[Bergamot]

Andy Dingley wrote:

>
(Equal heights imply a coupling between columns that's only
expressible in HTML by use of the <tableelement.)

Not necessarily. Equal height columns are possible using borders, floats
and negative margins.
http://webhost.bridgew.edu/etribou/l...dux/index.html

The side column widths have to be set in units suitable for borders, so
percents are out, but ems and px both work nicely.

--
Berg

[zzpat]

Spartanicus wrote:

>

>leftColumn 20%
rightColumn 20%
centerColumn use what's left

I'm currently defining centerColumn as a %, but to get this to work
properly the margin, padding and border settings have to be exactly the
same in both left and rightColumns.

There are no such limitations.

I start with the two side columns equaling 40% but the center isn't even
close to 60%. I realized margins would throw the center column into a
tizzy but borders AND padding?

I can see border but even that sucks, but padding sucks even more
because I wanted more padding in the right column. Keeping track of
borders, margins and paddings for three columns is too much work and one
small change causes the center column to drop below the side columns.

I'm about ready to give up on floating everything because of the
limitations on the height of columns. I wanted the background color to
extend 100% and was hoping for something easy.
One last question; Let say I have the following...

..centerColumn {
}

..centerColumn h3 {
}

..centerColumn p {
}

..centerColumn blockquote {
}

..centerColumn blockquote h3 {
}

and

..centerColumn blockquote p {
}

....is there an easier way to write this? I'm looking at a three column
layout and I want as few classes in the markup as possible.

[Spartanicus]

zzpat <zz*******@gmail.comwrote:

>There are no such limitations.

I start with the two side columns equaling 40% but the center isn't even
close to 60%. I realized margins would throw the center column into a
tizzy but borders AND padding?

Since you have ignored the reasonable questions that were put to you,
I'll return the favour and ignore you from now on.

--
Spartanicus

[zzpat]

Spartanicus wrote:

zzpat <zz*******@gmail.comwrote:

>>There are no such limitations.

I start with the two side columns equaling 40% but the center isn't even
close to 60%. I realized margins would throw the center column into a
tizzy but borders AND padding?

Since you have ignored the reasonable questions that were put to you,
I'll return the favour and ignore you from now on.

100% of what? I answered that with 100% background color - but you
already knew that and you're toying with me.

Did I check out templates? Yes. Many of them. I wouldn't be here if I
hadn't.

My request was for a layout that didn't include absolute positioning. I
thought my request was clear. Perhaps I should have typed it slower so
you could better understand.

[zzpat]

Bergamot wrote:

Andy Dingley wrote:

>(Equal heights imply a coupling between columns that's only
expressible in HTML by use of the <tableelement.)

Not necessarily. Equal height columns are possible using borders, floats
and negative margins.
http://webhost.bridgew.edu/etribou/l...dux/index.html

The side column widths have to be set in units suitable for borders, so
percents are out, but ems and px both work nicely.

I tried this and it didn't work for me. Can you do write a simple
example when you have the time?

I'm heading out the door in a few minutes and I won't be home until
Saturday afternoon so there's no hurry.

[Bergamot]

zzpat wrote:

Bergamot wrote:

>>
http://webhost.bridgew.edu/etribou/l...dux/index.html

I tried this and it didn't work for me. Can you do write a simple
example when you have the time?

Sure, but where shall I send the bill?

I'm heading out the door in a few minutes and I won't be home until
Saturday afternoon so there's no hurry.

Lucky me, coz I was worried about that. ;)

BTW, that template I pointed to isn't mine, so feel free to contact the
author about it if you feel the need.

--
Berg

[Saul]

On 16 Mar, 17:50, Spartanicus <[e-mail]:

zzpat <[e-mail]:

I've come to the conclusion that float was never made for designing a
page

Did you check the many CSS layout templates that are out there?

The optimum solution wouldn't include absolute positioning

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
also supported by IE. Why are you poised against ABS positioning?

Absolute positioning breaks on extreme screen sizes (eg PDAs) and on
text-resizing usually forcing images and text to flow one over the top
of another and so make a page unreadable - for unreadable read
inaccessible, defeating the point of going to a DIV and float
structure. Ditto hacks like negative margins.

>From what I can see there are no proper answers to this question. It's

been asked a lot on discussion boards and everyone always points you
at 'templates' in the generic and never at an answer. The reason is
that all the templates break or collapse at some point. If you are
producing a static site, a simple table layout for the basic structure
will be cleaner, simpler, more compatible and more robust, or you have
to choose not to use this particular style of page layout if you
definitely need to have a DIV and float structure. If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors and it's acutally better IMO to
switch the output to the user, rather than just rely on CSS. The main
problem is the inability to choose how to force DIVs to take the
height and width either of the content _or_ of their container in CSS
- these are allocated automatically so you don't have the control you
need over the DIV box-structure to make 'proper' layouts work..

The closest I've seen is rolling pair - you never divide a container
DIV into more than two sub divs and use left and right floats to
unfold the page. From memory this works sort of as follows (and I
can't remember if this is right and I can't recall if it is possible
to fix the heights too, you might want to try height 100% for the
inner divs)

<div class='container' style='width:100%'>
<div class='inner1' style='float:left; width: 20%'>
LEFT COLUMN
</div>

<div class='inner2' style='float:left'>
<div class='main' style='float:left'>
MAIN CONTENT
</div>
<div class='right' style='float:right; width: 25%' // 25%
of the inner2 width which is 80% ie 20%
RIGHT CONTENT
</div>
</div>
</div>
Saul
www.notanant.com
communities of websites

[Ben C]

On 2007-03-19, Saul <sa*********@dobney.comwrote:

On 16 Mar, 17:50, Spartanicus <[e-mail]:

>zzpat <[e-mail]:

>I've come to the conclusion that float was never made for designing a
page

>Did you check the many CSS layout templates that are out there?

>The optimum solution wouldn't include absolute positioning

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
also supported by IE. Why are you poised against ABS positioning?

Absolute positioning breaks on extreme screen sizes (eg PDAs) and on
text-resizing usually forcing images and text to flow one over the top
of another and so make a page unreadable - for unreadable read
inaccessible, defeating the point of going to a DIV and float
structure. Ditto hacks like negative margins.

From what I can see there are no proper answers to this question. It's
been asked a lot on discussion boards and everyone always points you
at 'templates' in the generic and never at an answer.

Yes, use a table for equal auto-height columns, i.e. when you want all
columns' heights set to the height needed to contain the content of the
highest one.

There are some diabolically clever tricks to do this without tables but
they're far too clever.

If everything has a height in ems or relative to the viewport, you can
use floats or positioning.

[zzpat]

Saul wrote:

>
Absolute positioning breaks on extreme screen sizes (eg PDAs) and on
text-resizing usually forcing images and text to flow one over the top
of another and so make a page unreadable - for unreadable read
inaccessible, defeating the point of going to a DIV and float
structure. Ditto hacks like negative margins.

The background color disappears on pages that are longer than the screen
size when ABS is used. It's a non-solution.

>

>
<div class='container' style='width:100%'>
<div class='inner1' style='float:left; width: 20%'>
LEFT COLUMN
</div>

<div class='inner2' style='float:left'>
<div class='main' style='float:left'>
MAIN CONTENT
</div>
<div class='right' style='float:right; width: 25%' // 25%
of the inner2 width which is 80% ie 20%
RIGHT CONTENT
</div>
</div>
</div>

FYI, the order of the floats would be left column, right column then
center (main content), but the background still won't be 100%.

I also tried floating an entire column which has many image floats
within a table cell. The layout breaks.

I ended up keeping the image floats but eliminating the column floats.

[Bergamot]

Saul wrote:

>
If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors

May I ask how you propose to determine the accessibility needs of
individual visitors?

--
Berg

[Saul]

On 19 Mar, 19:32, Bergamot <[e-mail]:

Saul wrote:

If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors

May I ask how you propose to determine the accessibility needs of
individual visitors?

Errr I would have thought it was obvious that you ask them or give
them options to change the way the page is displayed.

For example navigation at the top, bottom or both, use style sheets or
turn them off, linearise with the sidebars at the top or bottom etc -
a good dynamic site will be able to customise the output to the users
as well as the designer's preferences, and some of these options are
totally impossible just with CSS.
Saul
www.notanant.com
communities of websites

[Bergamot]

Saul wrote:

On 19 Mar, 19:32, Bergamot <[e-mail]:

>Saul wrote:

If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors

May I ask how you propose to determine the accessibility needs of
individual visitors?

Errr I would have thought it was obvious

If it were obvious, I wouldn't have posed the question. ;) I took your
remark about a dynamic site as making some type of automated
determination of the user's needs. That would be a trick, thought I.

that you ask them or give
them options to change the way the page is displayed.

For example navigation at the top, bottom or both, use style sheets or
turn them off, linearise with the sidebars at the top or bottom etc -
a good dynamic site will be able to customise the output to the users
as well as the designer's preferences, and some of these options are
totally impossible just with CSS.

That sounds like a whole lot of work for questionable benefit.

If the page doesn't meet the user's needs, it's really way easier for
*the user* to
1. Disable the browser features that make the page problematic (JS, CSS,
plugins, whatever), or
2. Go to another site.

My 2p. BTW, I disable CSS on a lot of sites I visit. On rare occasions,
I'll enable a user stylesheet specific to a site (like google groups).
It's just too much bother to do more than that. If you offered all those
customizing features you mentioned, what percentage of visitors would
actually use any of them? Have you researched the subject much, or are
you just blue-skying here? I'd really like to know.

--
Berg

[Saul]

On 20 Mar, 23:52, Bergamot <[e-mail]:

Saul wrote:

On 19 Mar, 19:32, Bergamot <[e-mail]:

Saul wrote:

If you are
producing a dynamic site, you can modify the output to the browser and
accessibility needs of your visitors

May I ask how you propose to determine the accessibility needs of
individual visitors?

Errr I would have thought it was obvious

If it were obvious, I wouldn't have posed the question. ;) I took your
remark about a dynamic site as making some type of automated
determination of the user's needs. That would be a trick, thought I.

that you ask them or give
them options to change the way the page is displayed.

For example navigation at the top, bottom or both, use style sheets or
turn them off, linearise with the sidebars at the top or bottom etc -
a good dynamic site will be able to customise the output to the users
as well as the designer's preferences, and some of these options are
totally impossible just with CSS.

That sounds like a whole lot of work for questionable benefit.

If the page doesn't meet the user's needs, it's really way easier for
*the user* to
1. Disable the browser features that make the page problematic (JS, CSS,
plugins, whatever), or
2. Go to another site.

My 2p. BTW, I disable CSS on a lot of sites I visit. On rare occasions,
I'll enable a user stylesheet specific to a site (like google groups).
It's just too much bother to do more than that. If you offered all those
customizing features you mentioned, what percentage of visitors would
actually use any of them? Have you researched the subject much, or are
you just blue-skying here? I'd really like to know.

The customising features are an extension of the way we build and
deliver sites - the same content is used to deliver HTML and WAP
versions (and could also delivery Flash or other versions too), so
extending it to be flexible in delivery for other types of access
isn't a huge extension for what we're doing. We've done a lot of
background digging and researching looking at opinions and best
practice across sites and the Internet in general, We also continually
test viewing the same content across different browsing environments -
not just browsers.

A major issue we kept running into was the position of the navigation
on the page particularly on sites accessed by small devices, and the
position of sidebar type content. You can't swap the page order around
in CSS (at least not without absolute positioning which actually is
probably the worst solution possible) and we so we have arrived at the
conclusion that pure CSS-based accessibility options are not enough to
satisfy the wide range of different types of access required. In
addition, all the sites we create are created purely with user-content
and at times CSS floats and DIVs just aren't robust enough or flexible
enough to get the presentation and sales pull-through the client
requires.

The BBC (www.bbc.co.uk) is the current best example of content
delivered to user-preferences at the moment with settings for low-
graphics and accessibility. We believe that others are picking up on
the trend, but I couldn't give you chapter and verse on that.
Saul
www.notanant.com
communities of websites

[Bergamot]

Saul wrote:

>
The BBC (www.bbc.co.uk) is the current best example of content
delivered to user-preferences at the moment with settings for low-
graphics and accessibility.

I can't comment on the mobile device version, but I think they screwed
up the "text only" version. They've gone and hard-coded crappy HTML
presentational attributes for colors and text, then have some way for
the user to change their horrible default values. If they had set those
things with CSS, I could simply disable stylesheets and get my browser
defaults. Instead, they give me a limited number of choices, none of
which I especially like.

If they had set none of those things in the first place, the user's
browser defaults would apply, which would be the best thing for that
particular user.

Their intentions may be good, but their implementation is less than
wonderful, IMO.

We believe that others are picking up on the trend

Thanks for the info.

--
Berg