Header Element Dynamic Width Overflow - Display: block and min-height / width on div container container

I am trying to accomplish something like this:

In particular, vertical text in white.

I can do this and make it dynamic (so there is no match between each word "fale" "que" "nem" "um" "gringo") but it requires me to create a containing div for each of the headers, for example

<div id="fale_textbox_0">
    <div class="highlight0a" id="Fale">
       <h1 class="fale_heading">Fale</h1>
    </div>
    <div class="highlight0a" id="que">
        <h1 class="fale_heading">que</h1>
    </div>
    <div class="highlight0a" id="nem">
       <h1 class="fale_heading">nem</h1>
    </div>
    <div class="highlight0a" id="um">
       <h1 class="fale_heading">um</h1>
    </div>
</div>

      

        
        
        
      

    

I know this is because it is a block type element. Why, then it doesn't work if I do

<div id="fale_text_container">
    <h1 class="fale_heading" id="fale">Fale</h1>
    <h1 class="fale_heading" id="que">que</h1>
    <h1 class="fale_heading" id="nem">nem</h1>
    <h1 class="fale_heading" id="um">um</h1>
    <div id="fale_textbox_2">
        <h1 class id="fale_heading_2">Rápido</h1>
    </div>
    <div id="fale_textbox_3">
        <h2 id="fale_subheading_2">Sem Sotaque</h2>
    </div>
    <div id="fale_textbox_1">
        <h2 id="fale_subheading_1">GRINGO</h2>
    </div>

      

        
        
        
      

    

Then install the container display: block

with min-width

and installed max-width

. For example:

  #fale_container {
          width: 100%;
          float: left;
          margin-left: 0;
          margin-right: 0;
          background-color: black;
          height: auto;
          min-height: 300px;
          position: relative; }

    #fale_container_padding {
          position: relative;
          height: 20%; }

    #fale_text_container {
          position: relative; }

    .fale_heading {
          display: block;
          position: absolute;
          width: 13.32756%;
          float: left;
          margin-right: 0.00666%;
          margin-left: 13.33422%;
          color: black;
          font-size: 3.5em;
          clear: right; }

    #fale, #que, #nem, #um {
          z-index: 10; }

    #fale {
          margin-top: -18%; }

    #fale:after {
          content: '';
          z-index: -1;
          position: absolute;
      background-color: #fff;
          width: 87%;
          height: 100%;
          left: 8%; }

    #que {
          margin-top: -9.5%; }

    #que:after {
          content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 73%;
          left: 8%; }

    #nem {
          margin-top: -1%; }

    #nem:after {
      content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 82%;
          left: 8%; }

    #um {
          margin-top: 7%; }

    #um:after {
          content: '';
          z-index: -1;
          position: absolute;
          background-color: #fff;
          height: 100%;
          width: 89%;
          left: 8%; }

      

        
        
        
      

    

When I do this, it overlaps. JSfiddle

Only the block doesn't work. And block

, and min-width

and min-height.

Also min-width

and min-height

without block.

This is because the container is set to a value position:relative

inside <div>

whose height is set toauto?

Why are the block

and properties not working min

?