CODEWITHSUNDEEP
htmlcss
Cobertos
Cobertos

Reputation: 2253

Strange calculated height on div display:inline-block element

I'm having an issue where the calculated height of a div I have is not correct. Quote from the javascript section of the jsFiddle.

Looking to the right you can see that both of the divs ela and elb don't occupy enough space to make the height of div.row that tall.
In Chrome I get the height to be 24px (20px of content with 4px of padding when the content should be smaller).
In IE I get the height to be 22.4px (so 18.4px of content which is still wrong).
The height should be something like 17px or 18px I think (so 13px or 14px of actual content)

Here's the fiddle. In here I also added a button to toggle the content on and off and it just leaves a single div with display:inline-block in there. http://jsfiddle.net/y7L7q/59/

Here's the HTML where <div class="row"> is the one with the height problem

<div id="navList">
    <div class="row">
        <div class="ela">@</div>
        <div class="elb">TheThing</div>
    </div>
</div>

Here's the CSS

#navList
{
    display:inline-block;
    margin-left:0;
    margin-right:auto;
}
#navList > div.row
{
    margin-top:3px;
    padding-right:2px;
    padding-left:5px;
    padding-top:2px;
    padding-bottom:2px;

    background-color:#DDDDDD;
}
#navList > div.row > div.ela, #navList > div.row > div.elb
{
    display:inline-block;
    width:20px;
    vertical-align:top;

    background-color:#FFDDDD;

    text-align:center;
    font-size:11px;
    font-weight:bold;
    font-family:Verdana,sans-serif;
}
#navList > div.row > div.elb
{
    width:120px;
}
#navList > div.row > div.elDEMO
{
    display:inline-block;
}

Upvotes: 1

Views: 1123

Answers (1)

Cobertos
Cobertos

Reputation: 2253

Figured it out. Because the font was set on only the child divs (div.ela, div.elb) and not the parent row div, the line-height was something totally different on the parent div.row causing the box to be bigger than normal (also due to the fact that all the elements in there were inline-block). I guess it defaulted to a line height based on whatever the font would have been there had I added some text (confirmed, it looks like this is what it did).

So, the fix is to make sure you set the font on the parent div to the either something the same as or smaller than that of the child divs so the parent resizes correctly.

Upvotes: 1

Related Questions