Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Multiple Equal Height Columns Test

Reply
Thread Tools

Multiple Equal Height Columns Test

 
 
Jeff
Guest
Posts: n/a
 
      01-22-2008
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

 
Reply With Quote
 
 
 
 
Nik Coughlin
Guest
Posts: n/a
 
      01-22-2008

"Jeff" <jeff@spam_me_not.com> wrote in message
news:(E-Mail Removed)...
> 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://websi...t_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.

 
Reply With Quote
 
 
 
 
Jeff
Guest
Posts: n/a
 
      01-22-2008
Nik Coughlin wrote:

Hello Nik,
>
> "Jeff" <jeff@spam_me_not.com> wrote in message
> news:(E-Mail Removed)...
>> 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://websi...t_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
 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-22-2008
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


 
Reply With Quote
 
Nik Coughlin
Guest
Posts: n/a
 
      01-22-2008
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


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.


 
Reply With Quote
 
adwatson
Guest
Posts: n/a
 
      01-22-2008
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" <(E-Mail Removed)> 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

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


 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      01-22-2008
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
 
Reply With Quote
 
Jeff
Guest
Posts: n/a
 
      01-22-2008
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

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

 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-22-2008
In article <(E-Mail Removed)>,
Jeff <jeff@spam_me_not.com> 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:
>
> <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)

--
dorayme
 
Reply With Quote
 
Jeff
Guest
Posts: n/a
 
      01-22-2008
dorayme wrote:
> In article <(E-Mail Removed)>,
> Jeff <jeff@spam_me_not.com> 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:
>>
>> <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)
>


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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to have columns with equal height? Fister HTML 21 01-07-2008 07:16 PM
Internet Sharing: Equal upload speeds but un-equal download speeds =?Utf-8?B?TkpU?= Wireless Networking 3 09-15-2007 06:22 AM
3 column, equal height, round corners, alpha png Nik Coughlin HTML 0 05-15-2007 01:26 AM
Not without a table: 3 column, equal height with background-images Nik Coughin HTML 9 11-30-2004 06:58 PM
test test test test test test test Computer Support 2 07-02-2003 06:02 PM



Advertisments