Multiple Equal Height Columns Test

J

Jeff

I need a look at a sample layout.

I've looked around at the different ways of writing equal height
columns. The CSS solutions with negative margins work well but presents
problems with readability as well as maintainability. It also doesn't
suit some needs.

So I looked at some javascript solutions, since these degrade nicely
if no script (the columns simply aren't equal height). I notice some
problems with most of these with changing text size, particularly in Moz
flavors and some padding issues.

So I wrote my own:

<URL: http://websiterepairguru.com/test_full_height_columns.html>

This simply adds bottom padding as needed to make the columns equal.
Columns with a class with equal as part of their class name are
equalized. No limit to number, or for that matter where they are.

I need a look in different browsers and OS's.

All comments and some insults accepted.

I'll clean up the code if it looks workable. I'm not correcting for
IE5, for example. And the initiation would change.

If you wish to try this in your own designs, any bottom padding must
be specified in pixels (in the CSS) to be preserved correctly.

Jeff
 
N

Nik Coughlin

Jeff said:
I need a look at a sample layout.

I've looked around at the different ways of writing equal height columns.
The CSS solutions with negative margins work well but presents problems
with readability as well as maintainability. It also doesn't suit some
needs.

So I looked at some javascript solutions, since these degrade nicely if
no script (the columns simply aren't equal height). I notice some problems
with most of these with changing text size, particularly in Moz flavors
and some padding issues.

So I wrote my own:

<URL: http://websiterepairguru.com/test_full_height_columns.html>

This simply adds bottom padding as needed to make the columns equal.
Columns with a class with equal as part of their class name are equalized.
No limit to number, or for that matter where they are.

I need a look in different browsers and OS's.

Looks OK:

http://browsershots.org/http://websiterepairguru.com/test_full_height_columns.html

I still like my solution:

http://www.nrkn.com/3ColEqualPositioned/

No Javascript, but as GTalbot pointed out last time I posted this, IE 7 has
some trouble selecting text in the leftmost column (probably trivial to fix)
and he objected to my using empty div elements for layout purposes and
clearing of floats, as well as my mixing floats and absolute/relative
positioning. However, of those only the IE 7 thing bothers me, and it is
otherwise very cross browser.
 
J

Jeff

Nik Coughlin wrote:

Hello Nik,

I have to tell you, that's really impressive. And not that my code works
but the 33 screen shots!

And then I noticed the mouseover zoom, which was on my to do list and
I thought, these guys are geniuses!
I still like my solution:

http://www.nrkn.com/3ColEqualPositioned/

No Javascript, but as GTalbot pointed out last time I posted this, IE 7
has some trouble selecting text in the leftmost column (probably trivial
to fix) and he objected to my using empty div elements for layout
purposes and clearing of floats, as well as my mixing floats and
absolute/relative positioning. However, of those only the IE 7 thing
bothers me, and it is otherwise very cross browser.

Well, I like it to. It works very well, but the trouble is that I
really don't understand it! If you find the time to explain how to set
it up, you'll get some converts. Now, I've seen the explanation, with
some extra rules, for a related CSS setup, and I didn't understand that
either! I'm afraid that I'm just a simple guy.

Jeff
 
N

Nik Coughlin

Jeff said:
Well, I like it to. It works very well, but the trouble is that I
really don't understand it! If you find the time to explain how to set
it up, you'll get some converts. Now, I've seen the explanation, with
some extra rules, for a related CSS setup, and I didn't understand
that either! I'm afraid that I'm just a simple guy.

columnWrapper holds two divs for each column, one for the content and one
for the background/border etc. So the div for the left column's content is
the one with class "left" and the one for it's background/border is the one
with class "leftBack".

The content columns are a fairly standard floated three column layout, and
they have an empty div after them that clears the floats. This means that
the parent div, columnWrapper, will always be the height of the tallest
column.

columnWrapper has position: relative, which means that any of its absolutely
positioned children, such as leftBack, rightBack and middleBack, will be
positioned relative to its boundaries. That way we can set each of the
background columns to have a top of 0 and a bottom of 0, so that they
stretch from the top to the bottom of the parent container called
columnWrapper - equal height columns.

In this instance when you set top: 0 and bottom: 0, you're saying, make the
top of this element 0 pixels from it's parents' top, and make the bottom of
this element 0 pixels from it's parent's bottom.

The stuff in the IE conditional comments is because IE 6 doesn't let you set
two absolute positions on an element that are opposite to each other, you
can either set a top or a bottom but not both, a left or a right but not
both. The expression corrects this. I can break this down for you too if
you like.

Let me know if any of that is still unclear. I've just woken up :p
 
N

Nik Coughlin

Nik said:
columnWrapper holds two divs for each column, one for the content and
one for the background/border etc. So the div for the left column's
content is the one with class "left" and the one for it's
background/border is the one with class "leftBack".

The content columns are a fairly standard floated three column
layout, and they have an empty div after them that clears the floats.
This means that the parent div, columnWrapper, will always be the
height of the tallest column.

columnWrapper has position: relative, which means that any of its
absolutely positioned children, such as leftBack, rightBack and
middleBack, will be positioned relative to its boundaries. That way
we can set each of the background columns to have a top of 0 and a
bottom of 0, so that they stretch from the top to the bottom of the
parent container called columnWrapper - equal height columns.

In this instance when you set top: 0 and bottom: 0, you're saying,
make the top of this element 0 pixels from it's parents' top, and
make the bottom of this element 0 pixels from it's parent's bottom.

The stuff in the IE conditional comments is because IE 6 doesn't let
you set two absolute positions on an element that are opposite to
each other, you can either set a top or a bottom but not both, a left
or a right but not both. The expression corrects this. I can break
this down for you too if you like.

Let me know if any of that is still unclear. I've just woken up :p

Oh and normally the absolutely positioned background divs would sit in front
of the content divs, which is why the content divs have position: relative
and z-index: 1, to bring them forward.
 
A

adwatson

That seems like a pretty clean solution to something that always
seemed to require way more "hacking" around in css than it should. In
the past I've just given up and used a table for it, rather than screw
around with some of the over-complicated css versions I've seen
floating around.
 
J

Jonathan N. Little

adwatson said:
That seems like a pretty clean solution to something that always
seemed to require way more "hacking" around in css than it should. In
the past I've just given up and used a table for it, rather than screw
around with some of the over-complicated css versions I've seen
floating around.

Your prerogative, however with "your way" if you decide you longer like
2, 3, 4 columns and wish to have only one, it requires entirely redoing
the page. With CSS, you only need to change the stylesheet if don
properly. (Also that means you users can do the same if they choose) And
it also means you can have it in columns for display and one column for
printing with the same page. Cannot do that with tables...
 
J

Jeff

Nik Coughlin wrote:

Hello Nik,

Thanks for the explanation, I'm feeling off today but will go through
a test layout later to verify that I understand. It's the first time
I've understood this! And it looks like you have some converts, although
I'm unsure if Jonathan is in the pro or anti group!

Jeff
 
D

dorayme

Jeff said:
I need a look at a sample layout.

I've looked around at the different ways of writing equal height
columns. The CSS solutions with negative margins work well but presents
problems with readability as well as maintainability. It also doesn't
suit some needs.

So I looked at some javascript solutions, since these degrade nicely
if no script (the columns simply aren't equal height). I notice some
problems with most of these with changing text size, particularly in Moz
flavors and some padding issues.

So I wrote my own:

<URL: http://websiterepairguru.com/test_full_height_columns.html>

This simply adds bottom padding as needed to make the columns equal.
Columns with a class with equal as part of their class name are
equalized. No limit to number, or for that matter where they are.

I need a look in different browsers and OS's.

All comments and some insults accepted.

I'll clean up the code if it looks workable. I'm not correcting for
IE5, for example. And the initiation would change.

If you wish to try this in your own designs, any bottom padding must
be specified in pixels (in the CSS) to be preserved correctly.

Jeff


Don't forget simple tactics where they can be used:

http://netweaver.com.au/alt/equalColsSimpleTactic.html

(just adapted from yours but not adjusted for IE)
 
J

Jeff

dorayme said:
Don't forget simple tactics where they can be used:

http://netweaver.com.au/alt/equalColsSimpleTactic.html

(just adapted from yours but not adjusted for IE)

Well that's rather clever and I'll add it to my bag of tricks.

There are a few caveats, usually you don't know for sure which column
is going to be tallest. Since we are all doing CMS, it's not completely
predictable. And you can't do full height borders.

Jeff
 
J

Jonathan N. Little

Jeff said:
Nik Coughlin wrote:

Hello Nik,

Thanks for the explanation, I'm feeling off today but will go through
a test layout later to verify that I understand. It's the first time
I've understood this! And it looks like you have some converts, although
I'm unsure if Jonathan is in the pro or anti group!

Not sure what you mean, pro or anti for what? Aside of some damn typos
in my message I don't think anyone would think that I was advocating
"table layouts".
 
D

dorayme

Jeff said:
Well that's rather clever and I'll add it to my bag of tricks.

There are a few caveats, usually you don't know for sure which column
is going to be tallest. Since we are all doing CMS, it's not completely
predictable. And you can't do full height borders.

OK, I have added a couple of extras. Borders in the spirit of
this thing! Notice how the main wrapper has one and the central
col just left and right. On my Safari and FF they go all the way
from top to bottom.

<http://netweaver.com.au/alt/equalColsSimpleTactic.html>

This sort of thing should more or less work with em widthings.
The borders account for so little and if you give some leeway
(especially for IE), and throw in an em for padding instead of
px, Bob could be your uncle.

The reality is that often we simply do know that the central col
is longest or at least which one is... Sometimes it all comes
down to the particular task at hand and while it is instructive
to go for grail, reality is often disappointingly more prosaic.

(Bag of tricks is a nice expression, our brains are all a bag of
little sub machines, all with their own routines, all scrambling
about trying to get things done... It is an illusion or a conceit
to suppose there is something, the self, the id, the higher
consciousness, the person, in control. The awful frightening
truth is that there is nothing in control even in our heads,
never mind there being no god. Rejoice in the low little tricks,
they are the stuff of mental life. <g>)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top