Métodos comumente usados para layout CSS: float:none|left|right
Valor:
nenhum:?Valor padrão. Objeto não flutua
esquerda: o texto flui para a direita do objeto
direita: o texto flui para a esquerda do objeto
Como funciona, veja um exemplo de uma linha e duas colunas
código xhtml:
| A seguir está o conteúdo citado: <div id="wrap"> <div id="column1">Esta é a primeira coluna</div> <div id="column2">Esta é a segunda coluna</div> <div class="clear"></div> /*Isso é contra a intenção do padrão web, significa apenas que os elementos abaixo dele precisam ser limpos*/ </div> |
Código CSS:
| A seguir está o conteúdo citado: #wrap{largura:100;altura:auto;} #coluna1{float:esquerda;largura:40;} #coluna2{float:direita;largura:60;} .claro{claro:ambos;} |
posição:estática|absoluta|fixa|relativa
Valor:
estático:?Valor padrão. Sem posicionamento especial, o objeto segue regras de posicionamento HTML
Absoluto:? Arraste o objeto para fora do fluxo do documento e use os atributos esquerdo, direito, superior, inferior e outros para realizar o posicionamento absoluto em relação ao seu objeto pai mais próximo com o maior número de configurações de posicionamento. Se tal objeto pai não existir, o objeto body será usado. E sua cascata é definida através do atributo z-index
corrigido:?Não suportado. O posicionamento dos objetos segue o método absoluto. Mas existem algumas regras a seguir
relativo:?Os objetos não podem ser empilhados, mas serão deslocados no fluxo normal do documento com base nos atributos esquerdo, direito, superior, inferior e outros.
Implementa o exemplo de uma linha e duas colunas
código xhtml:
| A seguir está o conteúdo citado: <div id="wrap"> <div id="column1">Esta é a primeira coluna</div> <div id="column2">Esta é a segunda coluna</div> </div> |