SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How to get a div to show underneath a fixed div regardless of the height

    Hi all,

    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.

    Is that possible?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

    You might want to reconsider what you are doing
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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...

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    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. 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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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
    its not impossible, I just gave a viable solution.

  9. #9
    SitePoint Addict capescafe's Avatar
    Join Date
    Dec 2004
    Location
    Bellevue, WA
    Posts
    222
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.
    Carolyn (cape's cafe)
    Twitter | My Treehouse Profile | eBookFling

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •