How to have columns with equal height?

I'd like for the div.something-else below the three columns to be placed
25 pixels below the coloumn with the longest text. Unfortunately with the
code below it only relates to the center-column. That causes problems if
the text in left- or right-column are long. How can I fix this?

Re: How to have columns with equal height?

In article <5575aa932873f8ca1c5e2ee16fe4@news.tele.dk>,
Fister wrote:

> I'd like for the div.something-else below the three columns to be placed
> 25 pixels below the coloumn with the longest text. Unfortunately with the
> code below it only relates to the center-column. That causes problems if
> the text in left- or right-column are long. How can I fix this?
>
> > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
>
>
>
>

Re: How to have columns with equal height?

On 2008-01-04, Fister wrote:
> Hello Ben,
>
>> Put another div around #something-else, with clear: both and
>> padding-top: 1px set on it.
>
> Thank you very much for the code. At first it worked but now I've
> added another two columns to the left and right which causes problem
> with clear: both. Could you / anyone help me? I think this should be
> easy to solve but I can't figure out how :-/
>
> Here is the code:
>
> http://www.bullamanka.dk/test.html

[...]
> #page-center-column
> {
> margin: 0 210px 0 210px;
^^^^^^^^^^^^^^^^^^^^^^^^

Get rid of this line. Replace it with overflow: hidden.

If you make the center-column overflow: hidden it becomes a Block
Formatting Context.

Regular readers of alt.html will by now be familiar with the idea of
using Block Formatting Contexts to cause containers to grow in height to
accommodate floated descendents.

But here we are using two other useful properties of BFCs:

1. The clear instruction clears floats _within the same BFC_. By making
#page-center-column a BFC, it becomes the BFC for #clear. That means
that #clear no longer clears the two big floats to the left and right
(page-left-column and page-right-column).
2. A BFC with auto width, unlike a regular block box, _itself becomes
narrower_ to squeeze between floats. A regular block box doesn't, it
occupies the full available width and its inline contents flow around
the floats. That was why you were using those 210px margins on
#page-center-column. If #page-center-column is a BFC, it no longer
wants those margins.

This is all standard CSS 2.1 (well, pretty much, the specification does
allow for #page-center-column to move below the two floats rather than
squeeze between them, but I don't know of any browsers that actually do
that).

Don't know if it works in IE.

Re: How to have columns with equal height?

Hello Ben,

> If you make the center-column overflow: hidden it becomes a Block
> Formatting Context.
>
> Regular readers of alt.html will by now be familiar with the idea of
> using Block Formatting Contexts to cause containers to grow in height
> to accommodate floated descendents.
> ...
> Don't know if it works in IE.

Thank you very much for your detailed explanation! It doesn't look as intended
in MSIE6 but in my case that doesn't matter :-)

Re: How to have columns with equal height?

In article ,
Ben C wrote:

> Regular readers of alt.html will by now be familiar with the idea of
> using Block Formatting Contexts to cause containers to grow in height to
> accommodate floated descendents.
>
> But here we are using two other useful properties of BFCs:
>
> 1. The clear instruction clears floats _within the same BFC_. By making
> #page-center-column a BFC, it becomes the BFC for #clear. That means
> that #clear no longer clears the two big floats to the left and right
> (page-left-column and page-right-column).
> 2. A BFC with auto width, unlike a regular block box, _itself becomes
> narrower_ to squeeze between floats. A regular block box doesn't, it
> occupies the full available width and its inline contents flow around
> the floats. That was why you were using those 210px margins on
> #page-center-column. If #page-center-column is a BFC, it no longer
> wants those margins.
>
> This is all standard CSS 2.1 (well, pretty much, the specification does
> allow for #page-center-column to move below the two floats rather than
> squeeze between them, but I don't know of any browsers that actually do
> that).

I hope you realise that every time you say stuff like this, it
makes work for me! I scurry off to see if I have to include extra
material into the story I am writing on parents and floated
children. So please be very responsible in what you say.



--
dorayme

Re: How to have columns with equal height?

Fister wrote:
> Hello dorayme,
>
>> I could have sworn there was something that might be a good fix for
>> this in a post a few minutes ago!
>>
>> http://examples.tobyinkster.co.uk/3col-new
>
> Thanks, that would be a solution. But isn't it possible without the use
> of JavaScript?
>
>
I have problems with that page in IE6 windows, it locks up the
browser. I didn't look at the javascript but this can't be difficult. I
think the basic idea is sound and should work with other two plus column
layouts.

Not since the ill fated NS4 used javascript to implement CSS (and not
well) has the use of javascript been in the toolbox for styling needs.
And the cool thing (with the obvious exception of Toby's 3 column in
IE) is that it degrades nicely.

Jeff

Re: How to have columns with equal height?

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

> Fister wrote:
> > Hello dorayme,
> >
> >> I could have sworn there was something that might be a good fix for
> >> this in a post a few minutes ago!
> >>
> >> http://examples.tobyinkster.co.uk/3col-new
> >
> > Thanks, that would be a solution. But isn't it possible without the use
> > of JavaScript?
> >
> >
> I have problems with that page in IE6 windows, it locks up the
> browser. I didn't look at the javascript but this can't be difficult. I
> think the basic idea is sound and should work with other two plus column
> layouts.
>
> Not since the ill fated NS4 used javascript to implement CSS (and not
> well) has the use of javascript been in the toolbox for styling needs.
> And the cool thing (with the obvious exception of Toby's 3 column in
> IE) is that it degrades nicely.
>
> Jeff

Well, OK, I always leave it till very late to look at Win IE. But
by now, perhaps there is a fix for TI's page. Bootnic suggested
something. TI will look at it and we will see. God! I feel like a
cricket commentator!

[The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?]

--
dorayme

Re: How to have columns with equal height?

dorayme wrote:
> In article <13o0md6nph0dla2@corp.supernews.com>,
> Jeff wrote:
>
>> Fister wrote:
>>> Hello dorayme,
>>>
>>>> I could have sworn there was something that might be a good fix for
>>>> this in a post a few minutes ago!
>>>>
>>>> http://examples.tobyinkster.co.uk/3col-new
>>> Thanks, that would be a solution. But isn't it possible without the use
>>> of JavaScript?
>>>
>>>
>> I have problems with that page in IE6 windows, it locks up the
>> browser. I didn't look at the javascript but this can't be difficult. I
>> think the basic idea is sound and should work with other two plus column
>> layouts.
>>
>> Not since the ill fated NS4 used javascript to implement CSS (and not
>> well) has the use of javascript been in the toolbox for styling needs.
>> And the cool thing (with the obvious exception of Toby's 3 column in
>> IE) is that it degrades nicely.
>>
>> Jeff
>
> Well, OK, I always leave it till very late to look at Win IE. But
> by now, perhaps there is a fix for TI's page.

My initial WAG was that the javascript was in a loop. Probably because
of the onresize event handler. TI is pretty sharp about these things I
suspect it won't be much trouble for him to fix it. Neither is it much
trouble to write your own resize code. I thought of this a couple weeks
ago after seeing all the javascript rounded corners examples, if js is
not a bad option there (it degrades well), then why not for the problem
of having same sized columns? That's one thing table layouts do well
that CSS just can't do without a little logic.


Bootnic suggested
> something. TI will look at it and we will see. God! I feel like a
> cricket commentator!
>
> [The test between Australia and India is on. (7/184) and 8 overs
> to go and India will not win, the question is will Australia?]


I've heard that the rules of cricket are very simple.

Jeff
>

Re: How to have columns with equal height?

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

> I've heard that the rules of cricket are very simple.
>

Ouch! What can I say? How about, '...so are the rules of chess'?



--
dorayme

Re: How to have columns with equal height?

dorayme wrote:
> In article <13o2aomd829al31@corp.supernews.com>,
> Jeff wrote:
>
>> I've heard that the rules of cricket are very simple.
>>
>
> Ouch! What can I say? How about, '...so are the rules of chess'?

Most Americans don't have a clue what this means:

The test between Australia and India is on. (7/184) and 8 overs
to go and India will not win, the question is will Australia?

Unfortunately (or not), I'm one of them!

Jeff
>
>
>

Re: How to have columns with equal height?

Well bust mah britches and call me cheeky, on Mon, 07 Jan 2008 08:49:07 GMT
Jeff scribed:

> dorayme wrote:
>> In article <13o2aomd829al31@corp.supernews.com>,
>> Jeff wrote:
>>
>>> I've heard that the rules of cricket are very simple.
>>>
>>
>> Ouch! What can I say? How about, '...so are the rules of chess'?
>
> Most Americans don't have a clue what this means:
>
> The test between Australia and India is on. (7/184) and 8 overs
> to go and India will not win, the question is will Australia?
>
> Unfortunately (or not), I'm one of them!

Sounds like the annual pan-Indian Ocean flapjack contest. You have to flip
each one of 7 stacks of 184 flapjacks with a spatula and catch it mid-air
within 8 minutes or it's all over.

--
Neredbojias
Riches are their own reward.

Re: How to have columns with equal height?

Neredbojias wrote:
> Well bust mah britches and call me cheeky, on Mon, 07 Jan 2008 08:49:07 GMT
> Jeff scribed:
>
>> dorayme wrote:
>>> In article <13o2aomd829al31@corp.supernews.com>,
>>> Jeff wrote:
>>>
>>>> I've heard that the rules of cricket are very simple.
>>>>
>>> Ouch! What can I say? How about, '...so are the rules of chess'?
>> Most Americans don't have a clue what this means:
>>
>> The test between Australia and India is on. (7/184) and 8 overs
>> to go and India will not win, the question is will Australia?
>>
>> Unfortunately (or not), I'm one of them!
>
> Sounds like the annual pan-Indian Ocean flapjack contest. You have to flip
> each one of 7 stacks of 184 flapjacks with a spatula and catch it mid-air
> within 8 minutes or it's all over.

Now that, I understand!

Jeff
>

Re: How to have columns with equal height?

Well bust mah britches and call me cheeky, on Mon, 07 Jan 2008 17:58:56
GMT Jeff scribed:

>>> The test between Australia and India is on. (7/184) and 8 overs
>>> to go and India will not win, the question is will Australia?
>>>
>>> Unfortunately (or not), I'm one of them!
>>
>> Sounds like the annual pan-Indian Ocean flapjack contest. You have
>> to flip each one of 7 stacks of 184 flapjacks with a spatula and
>> catch it mid-air within 8 minutes or it's all over.
>
> Now that, I understand!

Australians are known for their unusuality, but they eat well.

--
Neredbojias
Riches are their own reward.