Como posicionar muitos DIVs em CSS

Question

Tenho passado por um longo tutorial sobre W3Schooles para aprender CSS; Eu aprendi algumas noções básicas, mas ainda sinto falta do meu objetivo principal: Posicionamento DIVs

Este é o que eu estou tentando fazer

*---------*---------*
*         *         *
*         *         *
*---------*---------*

Meu objetivo é simples e trivial para alguns, mas eu estou tendo dores de cabeça fazendo isso da maneira certa , na verdade eu fiz isso, mas tem muitos problemas quando eu adicionar mais texto para os DIVs ou simplesmente fundir com outra DIVs

O que eu fiz é simplesmente jogar com valores de margem e preenchimento usando o Firebug. Tudo que eu preciso agora é me aprender esta simples (espero) truque, o que eu estou sentindo falta é: como este simples obras de posicionamento? Devo usar posicionamento absoluto, parente? Alterar a margem, o preenchimento, o tamanho ??

Se você tem um bom tutorial explicando este ponto, então por favor indicá-lo. Eu tinha outras dores de cabeça procurando que no Google.

Answer 1

Parece que você está tentando flutuar duas colunas ao lado do outro. Isto é bastante simples e abordados em profundidade aqui:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout / 2-col /

Eu tendem a ficar longe do posição propriedade, a menos que eu tenho que sobrepor alguns elementos.

Answer 2

Criando a 2 coluna layout CSS

Pessoalmente, eu não gosto de usar um clear: both em uma tag br

.

Use overflow: auto sobre a div pai em vez

<div class="container" style="overflow: auto">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
</div>

Answer 3

Eu tive sorte emular o código encontrado no 960 grade sistema .

O caminho certo é difícil porque muitas coisas não são realmente cross browser compatível. Navegadores estão ficando melhor, mas ainda é um pesadelo se você tem que usar qualquer coisa IE compatível. (Lotes de hacks)

Answer 4

Com o posicionamento absoluto você pode perfeitamente colocar qualquer um dos seus DIV. a desvantagem é que eles estão presos nessas posições não importa a resolução ou o tamanho da janela exibindo sua página.

O que você poderia fazer é flutuar o seu coluna da esquerda para a esquerda, e depois não especificar flutuando na coluna da direita. Manter o posicionamento padrão não especificando absoluta nem relativa, em seguida, basta ajustar as larguras dos elementos, conforme necessário.

Answer 5

Se você está bem com a criação larguras específicas em suas divs, o seguinte tem funcionado bem para mim:

<div style="width: 200px; float: left;"> left column </div>
<div style="width: 600px; float: left;"> right column </div>
<div style="clear: both;"> footer (can be left blank) </div>

O "float: left" faz com que as colunas alinhadas lado a lado. A última div (com o clear: both) faz com que qualquer coisa que você colocar após as colunas estadias abaixo as colunas. Dessa forma, você pode alterar a largura de qualquer coluna, sem mexer com o estilo do outro.

Answer 6

<div class="container">
    <div style="width:300px;float:left"><p>left column</p></div>
    <div style="width:300px;float:left"><p>right column</p></div>
    <br style="clear:both" />
</div>