I have a quick question about 2 divs on my page. I have a top bar that spans 100% width of the browser window and has got a fixed position. This div though does not have a fixed height. I did that purposely so that if someone is viewing in a smaller window then the div will just adjust according to how many lines the text goes to.
Underneath this fixed div, I have another div that I’d like to show right underneath the fixed div. Right now it does in my window but if someone is viewing this on their iPhone or in a really narrow browser window, then the top of the 2nd div gets hidden underneath the top div.
So my question is how can I get the 2nd div to be positioned based on the whatever height the top div becomes. So it’s always about 10px below the top div no matter what the height of the top div.
Not without javascript :). Sorry. Fixed elements don’t recognize other fixed elmeents are there. Thus…it’s impossible without using JS to detect the height and then assigning positioning vlaues to the second
Oh ok. So how would I use javascript to detect the height then and assign positioning values to the 2nd div. The 2nd div is not fixed, it’s position is absolute and right now it’s got the top set to 115px so that it shows underneath the fixed div. It works most of the time, just not in certain situations.
Would using the javascript to detect height, etc, not be advised or would it be mostly compatible across most browsers and would a mobile device be able to see it ok also?
Yes that’s exactly how to do it. THere’s nothing else you can do…those kind of elements aren’t recognized by any otherelements (absolute/fixed/otherwise)
Mobile browsers woudln’t have JS to help them so I doubt it’d work in mobile anyway.
Hrmmmm…ok yes, I think it’s time for reconsidering.
What I’ve got is a web site where you can read some of our books online. Ideally I’d like to have the top bar show the book title, author, isbn info, etc. and stay put while the reading portion (2nd div) can scroll underneath this top bar which is why I had that top bar fixed.
Would you by any chance have any suggestions of doing this another way?
One crude way would be to put a static div behind the fixed div with the exact same text. Or if you don’t want duplicate text, use the non breaking spaces. Or just the same amount of characters (xxxx). There has got to another way though. Interesting one. I’ll think on it…
So far there hasn’t. Noones found a way to make static boxes recognize AP boxes (via specs this is impossible), so unless that happens (or some other trickery, which there isn’t any (yet?)) this is impossible without JS
I was thinking one way I could do it would be to have a fixed height for the top fixed positioned div and then put overflow:scroll for that div, but I just didn’t want a two scroll bars though right next to each other, it gets confusing. There should be an easy way to do this.
Well your duplicate content would work, although that’d require twice the amount of HTML and twice hte amount of updating. I hardly call that feasible but that’s the develoeprs call isn’t it ;).
I’m saying it’s impossible without doing little cheating things like those. Pure CSS.
