Not able to set height of paragraph in percentage

Question

I am facing a problem: HTML:

<div id="picture_buttons">
            <p class="images"></p>
            <p class="images"></p>
            <p class="images"></p>
            <p class="images"></p>
</div>

CSS:

#picture_buttons{
    width:74%;
    margin:20px auto 20px auto;
    overflow:auto;
    padding:2%;
    border:solid 1px white;
    text-align:center;
}
.images{
    width:34%;
    height:45%;
    float:left;
    display:inline-block;
    margin:6%;
    background-color:white;
}

Now I am facing two problems: First, I am not able to set the height of paragraphs in %. It just doesn't display anything, but if I specify the size in pixels, then there is no problem. Second, the text-align:center; property in "#picture_buttons" is not working as well.

Please help.

score 2 · Accepted Answer · edited May 23 '17 at 11:51

2

In terms of the percentage height, you need to specify the height of parent elements.

Try this:

html, body { height: 100%; }
#picture-buttons { height: 100%; }

For an explanation of how percentage height works, see my answer here:
Why is the 'height' property with percentage value not working on my div?

edited May 23 '17 at 11:51

Community

1
1

answered Sep 12 '15 at 18:34

Michael Benjamin

346,931
104
581
701

the container element is the div, not the whole webpage. – codetalker Sep 12 '15 at 18:35
Okay let me post a picture – codetalker Sep 12 '15 at 18:41
This is your code, with my answer: http://jsfiddle.net/0zthsv5a/ (I added border and color for demo purposes.) – Michael Benjamin Sep 12 '15 at 18:42
your code is perfect! But, if I don't want the height of the div to be 100%, then?(Consider it is 75%) – codetalker Sep 12 '15 at 18:45
Yeah, you can change those numbers however you wish. The point is you need to specify a height on parent containers when you use percentage heights on the child. For the reasoning behind this read my other answer, which I posted in the answer. – Michael Benjamin Sep 12 '15 at 18:47
Okay thanks a ton! But my final question: If we have specified the height of the body, then why specify the height of html? – codetalker Sep 12 '15 at 18:49
My friend, it will all be quickly explained if you read my other answer, which is short and sweet. Here's your updated fiddle: http://jsfiddle.net/0zthsv5a/1/ – Michael Benjamin Sep 12 '15 at 18:50
And @Michael_B, why is the `text-align:center;` property not working? – codetalker Sep 12 '15 at 18:51
remove the `float: left` – Michael Benjamin Sep 12 '15 at 18:52

Not able to set height of paragraph in percentage

1 Answers1