CSS: computed height is 0

  • developer
  • Newbie
  • Newbie
  • developer
  • Posts: 5

Post 3+ Months Ago

Hello,

In the following code, why is the computed height 0, as viewed in Google Chrome or Opera Dragonfly, of the div with id="body"? Shouldn't the computed height be the max height of the child elements, which in this case is the div with id="leftTalls" (for which the computed height is non 0)? I've attached a zip with the HTML and images (these are solid color images).

Thanks in advance.

Code: [ Select ]
<html>
<head>
<style type="text/css">
#parent
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    height: 90px;
}

#wide
{
    float: right;
}

#body
{
    position: relative;
    top: 10px;
}

#leftTalls
{
    float: left;
    width: 160px;
}

#leftTallTop
{
}

#leftTallBottom
{
    position: relative;
    top: 10px;
}

#rightRects
{
    float: right;
    width: 300px;
}

#rightRectTop
{
}

#rightRectBottom
{
    position: relative;
    top: 10px;
}
</style>
</head>

<body>

<div id="parent">
    <div id="header">

        <div id="wide">
            <img src="a.png"/>
        </div>
    </div>
        
    <div id="body">
        <div id="leftTalls">
            <div id="leftTallTop">
                <img src="b.png"/>
            </div>

            <div id="leftTallBottom">
                <img src="b.png"/>
            </div>
        </div>

        <div id="rightRects">
            <div id="rightRectTop">
                <img src="c.png"/>
            </div>
            <div id="rightRectBottom">
                <img src="c.png"/>
            </div>
        </div>

    </div>
</div>
</body>

</html>
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. #parent
  5. {
  6.     width: 1000px;
  7.     margin-left: auto;
  8.     margin-right: auto;
  9. }
  10. #header
  11. {
  12.     height: 90px;
  13. }
  14. #wide
  15. {
  16.     float: right;
  17. }
  18. #body
  19. {
  20.     position: relative;
  21.     top: 10px;
  22. }
  23. #leftTalls
  24. {
  25.     float: left;
  26.     width: 160px;
  27. }
  28. #leftTallTop
  29. {
  30. }
  31. #leftTallBottom
  32. {
  33.     position: relative;
  34.     top: 10px;
  35. }
  36. #rightRects
  37. {
  38.     float: right;
  39.     width: 300px;
  40. }
  41. #rightRectTop
  42. {
  43. }
  44. #rightRectBottom
  45. {
  46.     position: relative;
  47.     top: 10px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div id="parent">
  53.     <div id="header">
  54.         <div id="wide">
  55.             <img src="a.png"/>
  56.         </div>
  57.     </div>
  58.         
  59.     <div id="body">
  60.         <div id="leftTalls">
  61.             <div id="leftTallTop">
  62.                 <img src="b.png"/>
  63.             </div>
  64.             <div id="leftTallBottom">
  65.                 <img src="b.png"/>
  66.             </div>
  67.         </div>
  68.         <div id="rightRects">
  69.             <div id="rightRectTop">
  70.                 <img src="c.png"/>
  71.             </div>
  72.             <div id="rightRectBottom">
  73.                 <img src="c.png"/>
  74.             </div>
  75.         </div>
  76.     </div>
  77. </div>
  78. </body>
  79. </html>
Attachments:
help.zip

(1.84 KiB) Downloaded 198 times

  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

the float on #leftTalls removes it from the page flow and therefore from height calculations.

put a div at the bottom of your body with a style of clear:both; that should force the container to grow to the correct height.
  • developer
  • Newbie
  • Newbie
  • developer
  • Posts: 5

Post 3+ Months Ago

Thanks for the quick reply.

I added the following div tag as a child of the "parent" tag:
Code: [ Select ]
    <div id="footer" style="clear: both; height: 30px;">
    </div>
  1.     <div id="footer" style="clear: both; height: 30px;">
  2.     </div>


The computed height of the div with id="body" is still 0. The footer is at the bottom of the page, but it overlaps with the bottom most element in the body tag, the div with id="leftTallBottom".
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

the clear div needs to be inside the body div as the last element. By the way how are you trying to get the height?
  • developer
  • Newbie
  • Newbie
  • developer
  • Posts: 5

Post 3+ Months Ago

Thanks, that was it. I get the height by going to the JavaScript console in Chrome and clicking on the div and then viewing the height under "Computed Style". Dragonfly has something similar.

However, I still notice that the footer overlaps with the body div. Furthermore, the body div does not encompass the entire block; when I highlight the body div in Chrome, the height is a little less than the height of the "leftTalls". Because of this, the footer overlaps with the body.
  • developer
  • Newbie
  • Newbie
  • developer
  • Posts: 5

Post 3+ Months Ago

It seems that the computed height of the body div does not take into account the 10 pixel separation between leftTallTop and leftTallBottom. Both the images they enclose are 600px high. Since they combine to be the tallest child element of the body div, the computed height is 1200px. I had made the relative positioning of leftTallBottom to be 10px below leftTallTop; however, the computed height is still 1200px. Both Opera and Chrome exhibit the same behavior.
I had to make the relative positioning of the footer to be 20px in order to place it directly below the body.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

glad you got it figured out.
  • developer
  • Newbie
  • Newbie
  • developer
  • Posts: 5

Post 3+ Months Ago

Instead of positioning leftTallBottom 10px below leftTallTop, I placed a div with height: 10px between the two. Now, the computed height of the body div is correct, 1210px. However, the footer still partially overlapped with body div. In order to place the footer directly below the body div, I had to place the same div with height: 10px between the body and footer instead of positioning the body 10px below header.
In my opinion, CSS should take into account the positioning of elements in height/width calculations.

[edit]
In order to place the footer directly below the body div, I had to place the same div with height: 10px between the body and HEADER instead of positioning the body 10px below header.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

developer wrote:
In my opinion, CSS should take into account the positioning of elements in height/width calculations.


I don't think the designers of CSS have been able to ask for whatever they want since as is, they have not necessarily even gotten what they have already asked for. Browser design is a big issue here -- be sure to check stuff like this on at least both firefox and IE unless you want a rude awakening at some point.

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 69 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.