Multiple Equal Height Columns Test

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:



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

Re: Multiple Equal Height Columns Test

"Jeff" wrote in message
news:13pb8jpii1acu2c@corp.supernews.com...
> 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:
>
>
>
> 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_fu ll_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.

Re: Multiple Equal Height Columns Test

Nik Coughlin wrote:

Hello Nik,
>
> "Jeff" wrote in message
> news:13pb8jpii1acu2c@corp.supernews.com...
>> 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:
>>
>>
>>
>> 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_fu ll_height_columns.html

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

Re: Multiple Equal Height Columns Test

Jeff wrote:
> Nik Coughlin wrote:
>>
>> 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.

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

Re: Multiple Equal Height Columns Test

Nik Coughlin wrote:
> Jeff wrote:
>> Nik Coughlin wrote:
>>>
>>> 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.
>
> 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.

Re: Multiple Equal Height Columns Test

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.

------
-- Aric Watson - http://www.maxvps.com - Virtual Private Server
hosting
------


On Jan 22, 1:16 pm, "Nik Coughlin" wrote:
> Nik Coughlin wrote:
> > Jeff wrote:
> >> Nik Coughlin wrote:
>
> >>>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.
>
> > 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.

Re: Multiple Equal Height Columns Test

adwatson wrote:
> 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...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Multiple Equal Height Columns Test

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

> Nik Coughlin wrote:
>> Jeff wrote:
>>> Nik Coughlin wrote:
>>>> 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.
>> 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.
>
>

Re: Multiple Equal Height Columns Test

In article <13pb8jpii1acu2c@corp.supernews.com>,
Jeff wrote:

> 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:
>
>
>
> 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)

--
dorayme

Re: Multiple Equal Height Columns Test

dorayme wrote:
> In article <13pb8jpii1acu2c@corp.supernews.com>,
> Jeff wrote:
>
>> 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:
>>
>>
>>
>> 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)
>

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

Re: Multiple Equal Height Columns Test

Jeff wrote:
> 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".

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: Multiple Equal Height Columns Test

In article <13pcu67fuuacbee@corp.supernews.com>,
Jeff wrote:

> dorayme wrote:
> > In article <13pb8jpii1acu2c@corp.supernews.com>,
> > Jeff wrote:
> >
> >> 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:
> >>
> >>
> >>
....
> >
> > 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.

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.



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

--
dorayme