I'm working on a layout that has a variable-height middle section and need
some suggestions on how I can make the bottom section adapt to that
situation.
Basically, I have:
- a fixed-length, fixed-width top section which is just a graphic
- a fixed-width _variable_height middle section which contains two columns,
an index on the left and main content on the right
- a fixed-length, fixed-width bottom section which is mostly a graphic with
a bit of text thrown in
I've been referring to this article in A List Apart:
http://www.alistapart.com/articles/flexiblelayouts/
I've tried to use the information in this article for my own situation but
it really doesn't work in my case. The difference is that the article
envisions a case where the second column in the middle section is always the
longest one. That enables the CSS designer to make it relative while the
other three columns in the middle section are absolute and the bottom then
adapts to the second column very smoothly.
In my case, though, either the index or content columns could be longer on
any given page so I can't simply define either column as the relative and
make the other one absolute. Is there any way that I can make my bottom
section sit below the longer of the two middle section columns _regardless_
of which is longer on that particular page?
For what it's worth, I've looked at "Method 2" in the same article which
appears to address this issue but it seems to only be half-explained. A
skeleton Javascript function is provided but he doesn't discuss the
invocation at all: where do I call this function and what exact values do I
pass it?
I'd really like to find a solution for my problem and, ideally, I'd like to
stay away from Javascript unless the development community has come around
to approving of Javascript. When I started doing web development 10 years
ago, Javascript solutions to problems were usually a nasty kluge that always
seemed to work correctly only in some of the major browsers. I've only
started to come back to this sort of web design now quite recently so maybe
things have changed though.
--
Rhino
Nik Coughlin - 25 May 2008 22:35 GMT
> I'm working on a layout that has a variable-height middle section and need
> some suggestions on how I can make the bottom section adapt to that
[quoted text clipped - 6 lines]
> - a fixed-length, fixed-width bottom section which is mostly a graphic
> with a bit of text thrown in
http://nrkn.com/2ColFixed/
Or any one of these, just remove the extra column:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
rhino - 27 May 2008 05:09 GMT
>> I'm working on a layout that has a variable-height middle section and
>> need some suggestions on how I can make the bottom section adapt to that
[quoted text clipped - 12 lines]
>
> http://css-discuss.incutio.com/?page=ThreeColumnLayouts
Thank you! This gives me lots of food for thought. I'll mull this over a bit
and you'll probably see me back in the group again to ask some followup
questions.
--
Rhino