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*******@gmai l.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
characteristic s?

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 <zzpatr...@gmai l.comwrote:

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 <zzpatr...@gmai l.comwrote:

>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
characteristic s?

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*******@gmai l.comwrote:

Andy Dingley wrote:

>On 16 Mar, 17:14, zzpat <zzpatr...@gmai l.comwrote:

>>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
characteristi cs?

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*******@gmai l.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*******@gmai l.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.