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_heigh t 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:
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
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_heigh t 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:
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
Comment