tricky css question

[Thomas Scheffler]

Hi,

I have a difficult layout and I don't want to use tables or javascript
for it.

******************************************
* LOGO * <-- variable --> *
******************************************
* ^ * *
* T * *
* i * *
* l * *
* l * *
* * CONTENT *
* B * *
* O * *
* T * *
* T * *
* O * *
* M * *
******************************************
* <-- variable --> *
******************************************

So I hope this can be understood but I try to explain it further.
The page as a logo which is at the top left corner. There is a header
right next to the logo which should expand when the window is resized.
At the left there should be some kind of navigation panel which should
expand to the bottom so the CONTENT should do the same. At the bottom
there is a footer.
So this should be the behaviour: If the content is to big for the page
the user has to scroll of cause. But if not the window should be
"filled" to 100%. This means the footer has to be at least at the bottom
of the browser window. If the window is resized, it should be adjusted
that way. There should be no horizontal scrollbar of cause.
It's easy to implement this with css and a classic table. But how do I
do this with nothing more than CSS and divs?

The diffs should appear in this order for accessibility reasons:
LOGO, HEADER, NAVI, CONTENT, FOOTER...

Is anybody skilled with this knowledge? The best I get was either the
footer is at the bottom of the screen and is overlapping the content partly:

*************************************
* *
* CONTENT IS HERE *
*************************************
* FOOTER *
*************************************
* .... AND HERE *
* *
* *
*************************************

Or the other extreme the footer is always at the bottom of the navi AND
the CONTENT, but this could be the middle of the page, the content and
navi divs are not streched to "nearly 100%" then.
So how do I do this?

Cheers

Thomas

 

[Steve Pugh]

So this should be the behaviour: If the content is to big for the page
the user has to scroll of cause. But if not the window should be
"filled" to 100%. This means the footer has to be at least at the bottom
of the browser window.

This is tricky. I do have a solution that either works as desired or
degrades to standard page (footer at end of content even if content is
shorter than the window) in most browsers but there are some problems
in, IIRC, Mac IE and older versions of Opera.

See http://steve.pugh.net/test/test57a.html

It's been a while since I looked at it though and I'm unlikely to be
able to dig up my notes this side of Christmas so good luck.

Steve

 

[Kris]

The diffs should appear in this order for accessibility reasons:
LOGO, HEADER, NAVI, CONTENT, FOOTER...

I'd say for the same reasons:
LOGO, CONTENT, FOOTER, NAVI

People visit your page primarily for content. Leaving it is a close
second, but content is still #1.

If you had a navigation of a mere 5 links, who cares, though.

 

[Neal]

If the content is to big for the page the user has to scroll of cause.
But if not the window should be "filled" to 100%.

You're describing a particular table layout which CSS isn't capable of
emulating. Well, it can, but it's really tricky.

See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
invent this way of keeping the footer on the bottom, but I don't have the
reference to who did. I used negative margins and various other tricks to
make things work out.

And as always, this is not fully tested, so reports of issues are welcome.

 

[Neal]

Steve Pugh:

See http://steve.pugh.net/test/test57a.html

Ah, so you're who I stole that from!

Credit is being added...

 

[Steve Pugh]

Steve Pugh:


Ah, so you're who I stole that from!

Credit is being added...

But I stole large chunks of it from other people. ;-)
I wish I could find who they were so I could give them credit....

Steve

 

[Thomas Scheffler]

This is tricky. I do have a solution that either works as desired or
degrades to standard page (footer at end of content even if content is
shorter than the window) in most browsers but there are some problems
in, IIRC, Mac IE and older versions of Opera.

See http://steve.pugh.net/test/test57a.html

It's been a while since I looked at it though and I'm unlikely to be
able to dig up my notes this side of Christmas so good luck.

Thank you for your great example. It works around the most difficult
issue with the footer. But the "height:auto" of the navigation panel did
not work as expected. It's not streched to the footer. Since the
navigation bar can grow on large content to the right. I don't want to
hack by backgrounding the content or holder div here.

Cheers Thomas

 

[Thomas Scheffler]

Thank you for your great example. It works around the most difficult
issue with the footer. But the "height:auto" of the navigation panel did
not work as expected. It's not streched to the footer. Since the
navigation bar can grow on large content to the right. I don't want to
hack by backgrounding the content or holder div here.

Another issue I just noticed is the hard width of 150px for the navi
which is needed for the content as the left margin. If the navigation
has some long word, this breaks the layout. As I said this is really
tricky )

Cheers
Thomas

 

[Steve Pugh]

Thank you for your great example.

Your welcome.

But the "height:auto" of the navigation panel did
not work as expected. It's not streched to the footer.

That is working as expected.

Since the
navigation bar can grow on large content to the right. I don't want to
hack by backgrounding the content or holder div here.

What you do between the header and footer is the same as any other web
page. To have mulitple columns with backgrounds that stretch to the
height of the longest you need to use a trick of some sort and
background images are amongst the most reliable.

It's shame that IE doesn't support CSS tables as
http://steve.pugh.net/test/test72.html demonstrates.

Steve

 

[Thomas Scheffler]

You're describing a particular table layout which CSS isn't capable of
emulating. Well, it can, but it's really tricky.

See <http://users.rcn.com/neal413/testfiles/footertest.html> - I didn't
invent this way of keeping the footer on the bottom, but I don't have
the reference to who did. I used negative margins and various other
tricks to make things work out.

And as always, this is not fully tested, so reports of issues are welcome.

Hi,

thanks for your response. The issue is that your navi-div named column
is not as long as to the bottom, which makes it difficult to change the
background here. It's also affected by long words which does not expand
the div to the right and increases the margin-left of the content. I
think is just not possible to pin div togehter in just a complex manner.
The thing of Steve would do the trick if you can have to divs of equal
height: the navi and content div. THen you can have the navi floating to
the left and have no issues with big words in the navi as this increases
the with of it. Also you have no issues withe the content of the content
div floating around the navi div. But I cannot see how this can be achieved.

cheers
Thomas

 

[Thomas Scheffler]

I'd say for the same reasons:
LOGO, CONTENT, FOOTER, NAVI

People visit your page primarily for content. Leaving it is a close
second, but content is still #1.

If you had a navigation of a mere 5 links, who cares, though.

NAVI is some kinde of dynamic hierarchical menu. I think it would be
better not to have the content before it. But that is matter of taste.

Cheers

Thomas

 

[Thomas Scheffler]

That is working as expected.

Do you mean your expectation or mine? ) If you do mean mine, firefox
on linux does not increase the height of neither content nor navi to the
footer. If I give al the divs some funny merking colors. The holder div
shines through at the bottom of the content div, if the short content is
displayed.

What you do between the header and footer is the same as any other web
page. To have mulitple columns with backgrounds that stretch to the
height of the longest you need to use a trick of some sort and
background images are amongst the most reliable.

It's more shine than anything else and would not fit my needs. You have
to make sure that the fixed part does not get bigger by bigger/longer
words or this will break your layout.

It's shame that IE doesn't support CSS tables as
http://steve.pugh.net/test/test72.html demonstrates.

Yap, 100% ACK
This was my attempt for a horizontal menu of <li> elements. But I didn't
get it done without css-tables and so with table and though without
GREAT div for table replacements. Shame on you Microsoft, I spit on you!
*lol*

Cheers

Thomas

 

[Steve Pugh]

Do you mean your expectation or mine?

Mine. height: auto almost always means that the height is determined
by the height of the content.
http://www.w3.org/TR/CSS2/visudet.html#Computing_heights_and_margins

Steve