Alternative to position:fixed 1

[ESquared]

Since IE doesn't support position:fixed properly, it's difficult to add a title/top bar at the top of the screen but have all the rest of the content on the page scrollable using the main scrollbars. If you have a solution to make IE respect this (ver 6 and up) I'd appreciate it.

However, I figured I could achieve as good an effect by switching what I was targeting. Instead of fixing the top in place and letting the rest of the content exceed the browser window as necessary (creating a scrollbar), I thought I'd put the long content in a div with overflow:auto, and make the div never exceed the browser height. Now I have a scrollbar in the div but no scrollbar on the main page. It's not exactly the same, but very close. In some ways, it could be considered superior for certain uses because now I can style the div to make it appear to be inset as part of a larger form, and also the scrollbar doesn't extend into the area of the title bar.

The problem is, I so far haven't been able to figure out how to get a div that extends to the bottom of the browser viewport and yet can be pushed downward by the titlebar (say if the user changes the font size).

<div><h1>title bar content</h1>
<ul><li>multiple lines</li>
<li>could change vertical size through user font size changes</li></ul>
</div>
<div style="overflow:auto;margin:5px;padding:5px">
main content, very long, exceeds screen, only want vertical scrollbar and no horizontal scrollbar. Would be nice if it had margins of 5px all around and if I could style it, perhaps with nested divs as if it was an inset text box.
</div>

Starting with that, let me try to explain again: the first div should stay at the top of the screen, and the second div should fill all the way to the bottom of the browser window. The second div should begin immediately after the bottom of the upper one no matter how the upper one's size changes.

Either the browser window should have a scrollbar which scrolls the second div's content but the top div remains fixed (feel free to remove any markup entirely or nest anything however you please), OR the browser window should not gain a scrollbar at any time but the 2nd div should have only a vertical scrollbar when the content is higher than its displayed size.

[tt]|---Browser Viewport----|
| |-------------------| [COLOR=black gray]^[/color]
| | Title Bar Content | [COLOR=black #e0e0e0]|[/color]
| | fixed position | [COLOR=black #e0e0e0]|[/color]
| | can change v-size | [COLOR=black #e0e0e0]|[/color]
| |-------------------| [COLOR=black #e0e0e0]|[/color]
| [COLOR=black #e0e0e0]|[/color]
| Main Content [COLOR=black #e0e0e0]|[/color]
| which [COLOR=black #e0e0e0]|[/color]
| runs [COLOR=black #e0e0e0]|[/color]
| off [COLOR=black #e0e0e0]|[/color]
| the [COLOR=black #e0e0e0]|[/color]
| screen below [COLOR=black gray]v[/color]
|-----------------------|[/tt]

OR

[tt]|---Browser Viewport----|
| |
| Title Bar Content |
| fixed position |
| but can change size |
| |-------------------| |
| |Main Content [COLOR=black gray]^[/color] |
| |which [COLOR=black #e0e0e0]|[/color] |
| |runs [COLOR=black #e0e0e0]|[/color] |
| |out of [COLOR=black #e0e0e0]|[/color] |
| |this div, below [COLOR=black gray]v[/color]
| |-------------------| |
|-----------------------|[/tt]

 

[Vragabond]

Using workarounds to produce the position: fixed in IE6 is a common things and you can find many explanations if you search Google for [google]fixed position IE6[/google]. Your problem, however, stems from wanting to have the second div immediately follow the first div, which seems to be of differing heights. This is something the fixed position nor the workaround can help you with.

The only way to achieve the succession of the elements in a way that one naturally follows the other is by using natural document flow. And this is not achievable with fixed position or absolute position (which is used for IE6 workaround), because both take the element out of document flow. That means that the next element has no way of knowing where the fixed (or absolutely) positioned element ended.

The only way you can do the latter is by using Javascript to determine the size of the top div and then apply respected margin-top to the lower div. Of course, if you give up having dynamically resizing top part, you can use margin-top on the second div in CSS to achieve the same.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ESquared]

If I size the top margin of the second div using ems, would that achieve the effect I am looking for, since the title bar content will only change size by font size changes, and theoretically should not have any lines break to two lines?

Only this is still problematic because not all the content in the top section is text, so the scaling will not be consistent. I'd need to be able to specify a margin something like 25px + 2.5em. But maybe I could simulate that with a combination of margin + padding or some nested elements or something, where one is a fixed size and the other is in ems. Hmmmm...

I'm not sure where to go with this.

Thanks for your input so far. I do know about the fixed position IE6 workarounds, but they in general aren't so tolerant of, as I said, a changeable-height item that I want to be fixed.

I'm still looking for more ideas if anyone has any. No need to repeat anything I can find with the google search, but if have an idea how to implement the second of my requests above, I'd be very grateful!

 

[ESquared]

Actually, I probably just found all I need from another thread here, which gave a fixed header example. There are other combinations including footers and sidebars.

 

[ClulessChris]

Esquared,
Can you tell me how you fixed this?
I'm gettin the same trouble with my 1st ever website (

http://www.tangsoodo.co.uk).

I've tried a few variations on the examples given at

http://annvankesteren.nl/2004/07/fixed-positioning

but the closeset I've come to success is the issue yu described with the scroll bar along side the div.

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[ESquared]

ClulessChris,

I didn't have time to really research an exhaustive solution. What I chose was to use the fixed-height top bar and deal with it not resizing as text resized. See my previous post for a link to the one I used.