Você tem um site, mas as caixas div não estão alinhadas corretamente. Isso pode acontecer por vários motivos, especialmente quando você considera os problemas de posição com divs de um site para outro. Da mesma forma, os elementos de caixa podem se sobrepor por alguns motivos, desde erros de posicionamento até problemas de estouro e problemas simples de flutuação. Na maioria dos casos, uma alteração rápida e fácil na folha de estilo do seu site corrigirá o problema.

1

Adicione uma margem se as caixas não tiverem atualmente margens e se sobrepuserem apenas uma pequena quantia. Você pode definir uma margem em apenas um lado, como à esquerda, se quiser usar apenas o elemento de margem para afastar o outro elemento da caixa. Por exemplo, se div A e div B forem colocados próximos um do outro e div B estiver sobreposto no lado esquerdo, você poderá modificar sua folha de estilos para adicionar uma margem do lado esquerdo à div A da seguinte forma:

a {largura: 100 px; margin-left: 10px; }

2

Pesquise sua folha de estilo para posicionar valores que podem causar sobreposição e alterá-los. Se você estiver usando posicionamento absoluto para organizar os elementos div do seu site, será um elemento livre para todos - qualquer elemento poderá sobrepor qualquer outro elemento na página. Portanto, se você tiver o div A definido como 100 pixels de largura e 15 pixels do topo e da esquerda da página, div B precisará ter pelo menos 115 pixels à esquerda para não se sobrepor ao div A. Você pode especificar a posição do parte superior ou inferior e da direita ou esquerda.

3

Defina um div com uma largura específica e oculte o estouro. Isso impede que o div exceda um tamanho especificado e evita que o conteúdo transborde, por assim dizer. Por exemplo, se a div A não tiver uma largura definida e você colocar uma imagem grande nela, a div será expandida automaticamente para acomodar a imagem. Se você definir a largura, a imagem ainda será exibida além das bordas da div, mas a div não será expandida. Se você ocultar o estouro, a imagem só será mostrada dentro dos limites da div e não expandirá o elemento. Por exemplo, para definir que a div A tenha 200 pixels de largura e não transbordar, você usaria esse código de estilo:

a {largura: 200 px; estouro: oculto; }

4

Use a opção "float" para empilhar as caixas div de lado a lado automaticamente. Por exemplo, você quer que a div A aja como uma barra lateral e div B para manter seu conteúdo - você pode flutuar ambas as divs para a esquerda, fazendo com que elas se alinhem horizontalmente. Elementos div flutuantes não se sobrepõem. Um exemplo de dois elementos flutuantes é algo como isto:

a {largura: 150 px; flutuar: esquerda; }

b {largura: 400px; flutuar: esquerda; }

Dicas

• Se você usa o Firefox, pode clicar com o botão direito do mouse em uma caixa e escolher "Inspecionar elemento". Isso fornece um esboço visual de cada elemento que pode ajudá-lo a identificar um problema especialmente complicado.
• Você pode definir o estouro para ocultar apenas no eixo x ou y usando "overflow-x" ou "overflow-y".