Box Float - Example CSS

by Cristofer Sousa

HTML

<div class="box">  
      <div class="box-photo">
           <img src="http://mlb-s1-p.mlstatic.com/relogio-mondaine-classico-78527-original-a-prova-dagua-202101-MLB20273713546_042015-F.jpg" alt="">
    </div>
      <div class="box-describe">
        <div class="box-white">
          <span class="text-orange">(Novo)</span><button type="button" name="button"> Teste</button>
          <h2>RELÓGIO MONDAINE</h2>
          <p class="ref">REF: 000/ (0000) - DISP 100000076461G0MGNH1</p>

          <table>
            <thead>
              <tr>
                <th>PREÇO DE TABELA</th>
                <th>QTD</th>
                <th>TOTAL</th>
              </tr>
            </thead>
            <tr>
              <td>R$999.99</td>
              <td>2</td>
              <td>R$  29999.97</td> 
           </tr>
          </table>
        </div>
            <h4>Ficha Técnica</h4>
            <p>Relógio Mondaine 76461G0MGNH1 Prata, com design prático e moderno.  <br>
              Material da caixa: Aço inoxidável; <br>
              Material da pulseira: Sintético; <br>
              Fechamento: Fivela buckle; <br>
              Funções: Calendário de dias;
               Mostrador:Com algarismos, faixas e ponteiros de horas, minutos e segundos; <br>
              Fundo: Prensado; <br>
              Medidas da caixa: 4cm de altura e 4cm de largura; <br>
              Medidas da pulseira: 18cm de comprimento e 2cm de largura; <br>
              Resistência à água: 30m; <br>
              Garantia: 1 ano, pelo fabricante.
            </p>
      </div>

    </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
*{font-family: 'Open Sans', sans-serif;}

.box{
  width:100%;
  height:100%;
  display:table;
}

.box-describe{
    width:49%;
    float:left;
    letter-spacing: 1px;
    padding-left:5px;
    background:#ecf0f1;
}

.box-white{
  background: rgba(243, 156, 18, 0.18);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}

.box-white button{
  padding: 5px;
  background:orange;
  float: right;
  margin-right: 10px;

}
.box-photo {
    width:50%;
    float:right;
}
.box-photo img{
    width:100%;
}

@media(min-width: 319px) and (max-width:532px){
  .box{
    width:100%;
    height:100%;
  }

  .box-photo {
    width:100%;
    clear: both;
    }

  .box-describe{
      width:100%;
      letter-spacing: 1px;
      padding-left:5px;
  }
}

@media(min-width: 533px) and (max-width:801px){
  .box-photo {
      width:100%;

  }

  .box-describe{
      width:100%;
      letter-spacing: 1px;
      padding-left:5px;
  }
}