Can I obtain the exact height of a DIV?

Discussion in 'CSS' started by wd_2k6, Aug 1, 2008.

  1. #1
    OK I have a DIV which is positioned absolutle for source-ordering reasons. I have no other option other than to do this because of the layout of the page floats would be out of the question for this DIV.

    The problem is this DIV varies in size as it contains some dynamic text which differs in size.

    So if I wanted other elements to appear underneath this I would need to add a margain-top of ??px whereby the ?? would be the dyanmic height of the DIV, can this be obtained in any way via PHP etc..maybe then I can echo it inside the CSS or via inline CSS statement?
     
    wd_2k6, Aug 1, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    If you're trying to keep something at the bottom and are working with divs, see it this way:

    <div 1>
    <div 2>

    Div1's height changes constantly, pushing Div2 down. Set Div2's top margin to a negative value which will cause it to overlap Div1, thus appearing inside Div1.

    Hope this helps.
     
    steelfrog, Aug 1, 2008 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    To be honest, I REALLY doubt this statement. Unless you are completely moving a full-width element before another one - in which case your 'source order' no matter how much you THINK helps with SEO, is non-semantic since you'd have gone so far out of flow order your document layout would make no sense.

    Do you have a example of your layout? We could likely offer suggestions on better ways of doing whatever it is you are doing for layout... Because absolute positioning of a dynamic height element you want to effect flow is ALWAYS a miserable /FAIL/.
     
    deathshadow, Aug 1, 2008 IP
  4. marinaroz

    marinaroz Member

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #4
    You really shouldn't position absolutely a div that has resizing content, it's more headache than anything.

    In case you still want to, though, javascript is your best answer. You retrieve the height of element x, by using x.clientHeight, Then you can either set a new height or use the result for whatever. Just remember, you'll need to call the javascript functions after the page has loaded, or IE will give you trouble.

    To learn more about the different height functions and how browsers support them, you can go to to the following website:
    http://www.quirksmode.org/dom/w3c_cssom.html
     
    marinaroz, Aug 2, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    OK taking everything into account here I think i could solve it by positioning another element with fixed properties, and leave the other one in the natural flow using floats etc and should be able to achieve the desired effect.
     
    wd_2k6, Aug 4, 2008 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    You'll have a much better chance of getting optimal help, if you tell us what you want to accomplish and what you've tried, rather than asking how to do what you've decided is the solution.

    ds is probably correct; it is highly unlikely that absolute positioning is a desirable approach.

    cheers,

    gary
     
    kk5st, Aug 4, 2008 IP