1

I wish to set an array of text boxes using float: left in css and breaking the float at the end of each row. I want to ensure that the boxes have the same height and have been trying to use the <selector> { height: x%; } - which works well with width property, but using % does not seem to work for height without setting a specific number like <selector> { height: ypx; }.

Please see the example below to illustrate the problem. 

h1, p {
  font-size: 1em;
  font-weight: normal;
  display:block;
  border: 1px solid black;
  width: 10%;
  padding : 2%;
  margin:1%;
  float:left;
}

h1 {
  height: 40px;
}

p {
  height: 100%;
}

br {
  clear: both;
}
<h1> Test 1 </h1>
<h1> Test 2 </h1>
<br>
<h1> Test 3 </h1>
<h1> Test 4 </h1>
<br>
<p> Test 5</p>
<p> Test 6</p>

Resulting HTML Page

yqlim
  • 6,898
  • 3
  • 19
  • 43
Graham Heap
  • 23
  • 7
  • 1
    If there are no elements with defined heights, then percentage-based heights are ignored. Because your `

    ` has no frame of reference to apply that percentage to, it does nothing. Can you explain what you're trying to achieve with `height: 100%`? 100% *of what*?

     – Tyler Roper Aug 26 '19 at 01:37
  • Wanted to use % in the same way as I do the width property, rather than fixed length px. and to maximize the height of the text boxes in a given row. The main aim is so that if a row of boxes with different texts, and hence default heights would all be forced to have the same height (using the maximum) and present well on the page. I only used 100% as a extreme example, and that in this instance it is not working or has no effect. Why is

    not considered to be a child of

    or the tag ?

     – Graham Heap Aug 26 '19 at 04:27

1 Answers1

0

Try using vh instead of % here, there are no parent elements here that have a defined height so % doesnt really know what to take a % of. 10vh is the same as 10% of the hie

Ryan Mahan
  • 106
  • 2