CSS Problem.

[swestrup]

I'm having a bit of a CSS problem that I don't know how to solve, and googling hasn't gotten me any closer to an answer. Any advice would be appreciated.

In brief, I have a fixed-size container DIV in which I'm displaying a variable-sized content DIV. When the content is larger than the container, the container grows scrollbars. That all works as expected.

The problem comes when the content is smaller than the DIV. In that case I want the content box to completely fill the container. This is important as there is some content which is stuck at the very bottom of the content DIV. I used min-height and when no scrollbars are showing, this works as expected, and everything looks right.

The trouble comes when I try to display content that is short but wide. In that case the container grows horizontal scrollbars and the content that is stuck to the bottom of the content DIV is partly covered by the scrollbars. This is not so good. So far though, I haven't found any way to prevent this. Any ideas?

Comments

[azrhey.livejournal.com]

This is important as there is some content which is stuck at the very bottom of the content DIV

I have little experience with CSS but after consulting my book the only solution I could come up with would be to float the content to the top of the content div.

Might not be the most elegant solution but it should work.

Or you could put a botton margin in your div ? *shrug* I haven't poked at CSS in a while

[swestrup]

To clarify, I WANT the bottom content to be stuck to the bottom of the content div. I just don't want it hidden.

Putting in a bottom margin on the content might work when the scrollbar is there, but it creates a gap when its gone.

[azrhey.livejournal.com]

set the scrollbar to always be there? ;P


also it depends a lot on which browser you are using. Some browsers do not like css at all.

[swestrup]

Well so far I'm only testing on Firefox and IE, but right now I have identical behavior on both.

[thebabynancy.livejournal.com]

that's what css hacks are for :D

[thebabynancy.livejournal.com]

a variable-sized content box... will vary with the amount of content in said box. best thing would be to used a fixed sized content box... or else when content is insufficient... the box will move around. If you want specific content on every page... use a separate box? That's what I would do.

[thebabynancy.livejournal.com]

just make sure the fixed box... is created for the largest amount of content. :)

[swestrup]

I think we are failing to communicate, as I can't see how this relates to my problem. Maybe I need to create a mock-up to show folks.

A sample would be best...

[ketherian.livejournal.com]

I've found it sometimes works to isolate the text you want text to appear within an existing div at a given location by putting it in a third div--to which you apply absolute positioning.

Re: A sample would be best...

[swestrup]

I tried that first. No go. Oh well. For now I'm just ignoring the problem, as it only occurs in one obscure case.

Re: A sample would be best...

[ketherian.livejournal.com]

Ah, but is it -
DIV
--DIV
----DIV
or
DIV
--DIV
--DIV
?
The latter should work. Another tip I've heard of is to list the first div with an ID and all subsequent ones with classes. I don't remember the reason right now, but I seem to remember it was something more than stylistic.

Good luck with it. CSS problems are a bugger.

Re: A sample would be best...

[swestrup]

Yes, the latter version works, but then there when the scrollbar is not there, there is a visible gap between the bottom content and the window bottom.

As far as I can tell, this is a case (positioning relative to scrollbar) that simply isn't covered by CSS, so there's no way to solve it.