Height works in pixels, not in percentages

Question

I am trying to create a simple menu using the following html setup:

<div class="container">
    <div class="container-cell">
        <a href="play.html">
            <div class="menu-option no-margintop">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_1.png"/>
                </div>
                <div class="menu-text"><span>Play</span></div>
            </div>
        </a>
        <a href="index.html">
            <div class="menu-option">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_3.png"/>
                </div>
                <div class="menu-text"><span>Highscore</span></div>
            </div>
        </a>
        <a href="index.html">
            <div class="menu-option">
                <div class="play-icon">
                    <span class="helper"></span><img src="./img/icon_2.png"/>
                </div>
                <div class="menu-text"><span>FAQ</span></div>
            </div>
        </a>
    </div>
</div>

In the process of creating this, I made a switch from hard pixels to percentages. Whereas the pixel version of setting hights works, it does not seem to work in percentages. The hight for one particular class, menu-option, does not seem to get picked up by the browser.

I have been searching for a while, and the only solutions I came across, was setting a height to both the body and html (100%). I have also set a height to any of the container-elements.

See css below:

html, body{
    height:100%;
}

.container {
    display:table;
    width:100%;
    height:70%;
}

.container-cell {
    display:table-cell;
    vertical-align: middle;
    height:100%;
}

.menu-option{
    width:90%;
    margin-left:5%;
    border-radius:10px;
    background-color:rgba(17,23,28,0.2);
    height:6.94%;
    margin-top:5%;
    font-size:150%;
}

Why is the browser not picking up on the height in percentage and how can make it use the height in percentage?

score 3 · Accepted Answer · answered Mar 21 '15 at 18:21

3

Add display: inline-block; to your menu-option class for the height property to work. Something like this:

.menu-option{
    display: inline-block;
    width:90%;
    margin-left:5%;
    border-radius:10px;
    background-color:rgba(17,23,28,0.2);
    height:6.94%;
    margin-top:5%;
    font-size:150%;
}

Here's a jsfiddle of the above: https://jsfiddle.net/AndrewL32/e0d8my79/17/

answered Mar 21 '15 at 18:21

AndrewL64

15,794
8
47
79

That works! Thanks ;) I am curious though, why is this required? – Matthijs Mar 21 '15 at 18:23
**inline-block elements** are like inline elements but they can have a specific width and height. Check this link: http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block The Ticked answer gave a very descriptive explanation of the different types of display elements :) – AndrewL64 Mar 21 '15 at 18:25
Because inline elements can't have a height set. And a percentage only works when it's based off a parent element that has a height set. – Ruan Mendes Mar 21 '15 at 18:25
That explains. Thanks for the help guys! – Matthijs Mar 21 '15 at 18:26

Height works in pixels, not in percentages

1 Answers1