SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making div to drop down when div beneath it change it's height dimension ?

    OK,I will try to be as clear as possible.
    I have one div (container) 500pix height containing two another divs in it. One of them is 200 height and another one that is on bottom is 300. Now if I manually change dimension of div that is on bottom to 200 pix, I want the one that is on top to get down as much as it can (so it's 100pix in this case) to the top of the one div that is on the bottom.
    So if you understand me I want to make the position of the div that is on the top to depends on the height dimension of the div that is on the bottom, and to always drop down to it so they touch each other.
    I need this for some javascript programming...
    Thanks

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Not quite sure if this is what you mean but here's a complicated example anyway

    http://www.pmob.co.uk/temp/vertical-...divstobase.htm

  3. #3
    Non-Member
    Join Date
    Jun 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I tried this but it's not doing good for me.
    OK I put picture as an example of what I need to do. I think everything is clearer for understanding now just if you look at it. My problem is to make div1 follow div2 as in this picture. Still searching for a solution...

    http://img84.imageshack.us/my.php?image=exampleoh2.jpg



    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I may be missing something vital here but isn't that exactly what my code does

    You can change the height on the bottom paragraph and the top paragraph still sits on top of it which is what I think you wanted.

    Don't get confused that I have styles paragraphs instead of a div as they are just containers for the text. The same logic would apply if they were divs.

    The example I posted works almost everywhere in modern browsers.

    You may have to explain where my example differs from your picture and I will try and amend it to suit (assuming its possible of course ).

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Here is my example with a toggle for the height.

    http://www.pmob.co.uk/temp/vertical-...ivstobase2.htm

  6. #6
    Non-Member
    Join Date
    Jun 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. Well, first thank you for really trying to help. It's good to see it.
    Now, becouse I just couldn't do it myself to work as you said I will let you please try...
    Here I send you part of my page that is giving me problems. As you can see there are some hands (ruke-up div) on top that are suposed to hold a panel beneath it (portfolio div). So the idea is when I change panel height (slide it slowly down or up trough javascript) I logically want those hands to follow this change. So I am constantly trying but just can't make those hands follow and just drop down when portfolio is lower and go up when it's higher.
    Man you don't know how thankful I would be to you if I could find solution. I am trying to fix this for days now and nothing seems to work, and this is for my portfolio site I work on it for a while but without finding solution to this I am lost

    Thanks
    Attached Files Attached Files

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well the answer still seems to be the same.

    http://www.pmob.co.uk/temp2/thoutam/portfolio2.htm

    Is that not what you wanted. It's basically the same code I have given you three times now

    Of course if you are toggling this div via javascript you could have just changed the positions and dimensions on the fly anyway.

    Hope its helps anyway.

  8. #8
    Non-Member
    Join Date
    Jun 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Well the answer still seems to be the same.

    http://www.pmob.co.uk/temp2/thoutam/portfolio2.htm

    Is that not what you wanted. It's basically the same code I have given you three times now

    Of course if you are toggling this div via javascript you could have just changed the positions and dimensions on the fly anyway.

    Hope its helps anyway.
    Well yeah it works at some point, the problem is this still doesn't work in IE, right ?
    But thanks anyway man, you helped a lot, so I wont ask you to totally finish my site and me doing nothing, I have to try a little experimenting for myself and leave you alone hehe, hope get this to also work in IE somehow (and I saw "if IE" option but can't make it to work in both (FF and IE) browsers at same time right?).

    Thanks anyway for all, man... I'll try to get it crossbrowser if there is a way and tell you all about it...

    Good luck

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Well yeah it works at some point,
    Some people are never happy - it works exactly like you asked for as far as I can tell
    the problem is this still doesn't work in IE, right ?
    Wrong

    You're not paying attention!

    I told you it works in almost all modern browsers. It works fine in IEwin from ie5 - ie7 inclusive.

    You need to include the conditional comments for IE because it doesn't understand display:table and needs an alternative method which is just s a couple of lines of code.

  10. #10
    Non-Member
    Join Date
    Jun 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey man it's all good now hehe, this works well now. Well the problem was when I was clicking on a test you made, it wasn't changing anything in IE (tried my IE6 and IE7 - have them both on same WinXP hehe), but if I just change height manually it's working really good. I must admit not to lie I really was suspicious on all this
    Now thank you very much, you maybe don't realize but you gave me the solution to the one of the biggest problems I ever had in my webdesign, and I was never stuck with one problem so long like with this one, trying to find solution on many many forums and sites until I found it here.... Thanks man
    When the site is totally finished I will try to seek you on this forum and send a link to you if you will be interested to see how helpful your answer really was and why I so hardly needed all this...

    Good luck

    Johnny

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Glad you're sorted and got something to work with now


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
  •