HTML Estrutura do HTML e Float

MugenShion · 30 de abril de 2019

Olá, eu queria saber se minha estrutura de html está correta ou errei em alguma parte?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <title>Estrutura do HTML</title>
  </head>
  <body>
    <div id="container">
      <div id="header">
        
      </div>
      
      <div id="content">
        <div id="nav">
        
        </div>
        <div id="main">
        </div>
      </div>
      
      <div id="footer">
        
      </div>
    </div>      
  </body>
</html>

e sobre o float eu utilizo ele como ? tipo eu escrevo o valor da propriedade right seria para posicioná-lo na direita certo? então se for uma div com 50% da largura do tamanho do elemento pai e outra div com 50% também, e se eu quiser posicioná-la uma do lado da outra?

GabrielSennaMs · 30 de abril de 2019

@MugenShion A estrutura html está correta! E você pode utilizar no html5 os elementos <header> e <footer> ao em vez de colocar uma div com id.

A propriedade float é geralmente utilizada para alinhar imagens em textos ou alinhar cards, também gosto de utilizar para alinha os botões para manipular o modal.

MugenShion · 30 de abril de 2019

no caso cards seria os boxes né ? e como eu alinharia uma 2 div uma do lado da outra ? ex:

1 boxe

2 boxe

1 boxe 2 boxe

mais ou menos isso a primeira div não ia mudar de lugar, mas a 2 sim

GabrielSennaMs · 1 de maio de 2019

@MugenShion Você pode usar CSS Grid ou Flex box pra isso, você pode usar float também, mas eu não recomento.

Um exemplo usando Flex box:

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
    background-color: DodgerBlue;
  }
  .flex-container > div {
    background-color: #f1f1f1;
    width: 50%;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
<div class="flex-container">
  <div>LEFT</div>
  <div>RIGHT</div>  
</div>