A estruturação de um site usando colunas criadas com CSS e HTML agora é o padrão, e as tabelas foram deixadas para trás para realizar essa função.

Contenidos ocultar
1 Método 1: usar um contêiner flex.
1.1 Exemplo 1: Colunas com a mesma largura:
1.2 Exemplo 2: Colunas de largura diferente. Conteúdo mais barra lateral.
2 Método 2: Usando float.
3 Método 3: Usando o Bootstrap.

Método 1: usar um contêiner flex.

O uso de um contêiner flex é um método CSS moderno e já bem suportado, portanto, o mais recomendado.

Em termos gerais, você atribui a propriedade flex a um contêiner e indica um comportamento de linha; e cada “filho” ou coluna recebe uma determinada largura que fará com que se comportem como tal. Um exemplo deixará tudo mais claro.

Exemplo 1: Colunas com a mesma largura:

A estrutura HTML seria a seguinte:

<div id="container">
  <div>
    <p>Conteúdo da primeira coluna.</p>
  </div>
  <div>
    <p>Conteúdo da segunda coluna.</p>
  </div>
</div>

E o respectivo CSS é o seguinte:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#container > div {
  width: 50%;
}

Neste exemplo, se os filhos/colunas tiverem 50% de largura, isso fará com que eles dividam o espaço em dois, de modo que duas colunas sejam geradas. Se quiséssemos 3 colunas, seria tão simples quanto alterar a largura para 33%, se quiséssemos 4 colunas para 25%, e assim por diante.

Exemplo 2: Colunas de largura diferente. Conteúdo mais barra lateral.

Um uso muito comum de colunas é criar a estrutura de um blog, normalmente uma barra lateral e uma coluna com o conteúdo principal.

Suponha que queiramos que o conteúdo ocupe 75% da largura disponível e que a barra lateral ocupe 25%, o código HTML seria

<div id="container">
  <div id="main">
    <p>Conteúdo principal.</p>
  </div>
  <div id="sidebar">
    <p>Barra lateral.</p>
  </div>
</div>

E o respectivo CSS é o seguinte:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#main {
  width: 75%;
}
#sidebar {
  width: 25%;
}

Além disso, os contêineres flexíveis têm muitas propriedades, como a alteração da ordem em que as colunas são exibidas e outros comportamentos úteis. É certamente um bom investimento de tempo aprender mais sobre as propriedades dos contêineres flexíveis.

Método 2: Usando float.

Para criar colunas, podemos começar com a estrutura HTML e, em seguida, adicionar estilos CSS:


<div id="container" class="clearfix">

<div id="side">
<p>É aqui que o conteúdo será alinhado à esquerda</p>
</div>

<div id="main">
<p>Aqui estará o conteúdo principal ao lado do conteúdo lateral ou do menu lateral</p>
</div>

</div>

Como você viu, há 3 tags que servirão como contêineres:

  • Container (Contêiner) – Determina o espaço de trabalho total.
  • Side – Largura da lateral e sua localização.
  • Main – Largura do conteúdo.

As propriedades que eles devem ter são:


#container {
 text-align: left;
 width: 100%;
 margin: auto;
}

#side {
 width: 20%;
 background-color: #CCCCCC;
 float:right;
}

#main {
 width: 75%;
 float: left;
 background-color: #FFFFFF;
 border:#000000 1px solid;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Método 3: Usando o Bootstrap.

O Bootstrap é uma das estruturas CSS mais populares e amplamente usadas para design responsivo da Web. Em sua versão 5, ele oferece uma maneira simples e rápida de criar duas colunas em seu site sem a necessidade de escrever muito código CSS personalizado. Para usar o sistema de grade do Bootstrap 5, é necessário criar um contêiner principal. Esse contêiner permite alinhar e centralizar corretamente o conteúdo da sua página. Adicione um <div> com a classe container dentro do elemento <body>> do seu arquivo HTML:

<body>
  <div class="container">
    <!-- Seu sistema de grade aqui -->
  </div>
</body>

Dentro do contêiner principal, crie um elemento <div> com a classe row para definir uma linha. Em seguida, dentro dessa linha, crie dois elementos <div> com as classes col-6 para definir duas colunas de largura igual (o número 6 indica que cada coluna ocupará metade da largura total, pois o Bootstrap usa um sistema de 12 colunas):

<div class="container">
  <div class="row">
    <div class="col-6">
      <!-- Conteúdo da coluna 1 -->
    </div>
    <div class="col-6">
      <!-- Conteúdo da coluna 2 -->
    </div>
  </div>
</div>

Agora você pode adicionar o conteúdo que quiser em cada coluna. Por exemplo, você pode adicionar texto, imagens ou qualquer outro elemento HTML.