Div alignment

Navigation
2

I own a table that is built dynamically with information from a movie director. I need to change the structure for a div, mainly for the responsibility issue, today reducing the size of the component that stores this table, the text ends up overlapping;

Today it looks like this: 

.label{
  font-weight: bold;
  text-align: right;
}

.blue-box{
  background-color: green
}
<div class="blue-box">  
<table>
<tr>
  <td class="label">Nome:</td>
  <td>Del Toro</td>
  <td class="label">Data de cadastro:</td>
  <td>19/05/2017</td>
  <td class="label">Data de atualizacao:</td>
  <td>19/05/2017</td>
</tr>
<tr>
  <td class="label">Categoria de produto:</td>
  <td>Diverso</td>
  <td class="label">Ultimo Prêmio:</td>
  <td>Leão De Ouro</td>
  <td class="label">Filme Indicado</td>
  <td>Shape of Water</td>
</tr>
</table>
<div>

</div>

With div I was able to do a lot of the work, however some things like the alignment in the labels I could not do at all: 

.label{
  font-weight: bold;
  float: left;
  text-align: right;
  display: inline;
  margin-right: 5px
}

.blue-box{
  background-color: aquamarine;
  overflow: hidden;
}

.father{
  float: left;
  margin: 0px 5px 0px 5px ;
}

.content{
  float: left;
  display: inline;
}
<div class="blue-box">  
<div class="father">
  <div class="label">
  Nome:
  </div>
  <div class="content">
    Del Toro
  </div>
</div>
<div class="father">
  <div class="label">
  Data de cadastro:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Data de atualizacao:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Categoria de produto:
  </div>
  <div class="content">
    Diverso
  </div>
</div>
<div class="father">
  <div class="label">
  Ultimo Prêmio:
  </div>
  <div class="content">
    Leão de Ouro
  </div>
</div>
<div class="father">
  <div class="label">
  Filme indicado:
  </div>
  <div class="content">
    Shape of water
  </div>
</div>
</div>

Is there any way I can preserve this alignment of labels as if it were in the HTML-only table?

Or am I going to have to work with JS to try to check the width of the labels and set them as the largest element?

    
asked by anonymous 06.11.2017 / 01:41

2 answers

0

Add in .father 

width:30%;

See if it solves your problem 

.label{
  font-weight: bold;
  float: left;
  text-align: right;
  display: inline;
  margin-right: 5px
}

.blue-box{
  background-color: aquamarine;
  overflow: hidden;
}

.father{
  float: left;
  margin: 0px 5px 0px 5px ;
  width:30%;
}

.content{
  float: left;
  display: inline;
}
<div class="blue-box">  
<div class="father">
  <div class="label">
  Nome:
  </div>
  <div class="content">
    Del Toro
  </div>
</div>
<div class="father">
  <div class="label">
  Data de cadastro:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Data de atualizacao:
  </div>
  <div class="content">
    19/05/2017
  </div>
</div>
<div class="father">
  <div class="label">
  Categoria de produto:
  </div>
  <div class="content">
    Diverso
  </div>
</div>
<div class="father">
  <div class="label">
  Ultimo Prêmio:
  </div>
  <div class="content">
    Leão de Ouro
  </div>
</div>
<div class="father">
  <div class="label">
  Filme indicado:
  </div>
  <div class="content">
    Shape of water
  </div>
</div>
</div>
    
06.11.2017 / 02:41
0

If you want to maintain cell dimensions as you would for tables, working with the CSS display attribute can solve your problem.

Display attributes corresponding to table elements: 

table { display : table}
tr { display : table-row}
thead { display : table-header-group }
tbody { display : table-row-group}
tfoot { display : table-footer-group }
col { display : table-column}
colgroup { display : table-column-group }
td, th { display :  table-cell }
caption { display : table-caption }

Source: maujor.com

Applied to your code would look like this: 

.label{
  font-weight: bold;
  text-align: right;
  display: table-cell;
  margin-right: 5px
}

.blue-box{
  background-color: aquamarine;
  overflow: hidden;
  display: table;
}

.father{
  margin: 0px 5px 0px 5px ;
  display: table-row
}

.content{
  padding-left: 10px;
  display: table-cell;
}
<div class="blue-box">
  <div class="father">
    <div class="label">
      Nome:
    </div>
    <div class="content">
      Del Toro
    </div>
  </div>
  <div class="father">
    <div class="label">
      Data de cadastro:
    </div>
    <div class="content">
      19/05/2017
    </div>
  </div>
  <div class="father">
    <div class="label">
      Data de atualizacao:
    </div>
    <div class="content">
      19/05/2017
    </div>
  </div>
  <div class="father">
    <div class="label">
      Categoria de produto:
    </div>
    <div class="content">
      Diverso
    </div>
  </div>
  <div class="father">
    <div class="label">
      Ultimo Prêmio:
    </div>
    <div class="content">
      Leão de Ouro
    </div>
  </div>
  <div class="father">
    <div class="label">
      Filme indicado:
    </div>
    <div class="content">
      Shape of water
    </div>
  </div>
</div>
    
06.11.2017 / 04:17
Paging of records VB.NET Working with XML?