Dicas

O Internet Explorer ao reproduzir um elemento não respeita a nossa indicação de altura para o elementos mais sim as alturas (eventualmente acumuladas) dos elementos/conteúdo desse elemento. Ou seja expande a caixa onde era suporto encaixar-se.

O que é que isto quer dizer?

html {height: 100%;}
body {min-height: 100%;}
* html body {height: 100%;}

Se as suas border terminarem no fundo da janela do seu navegador isso normalmente quer dizer que se disse à div para ter 100% de altura do elemento body, o qual deve ser 100% do viewport. Como não se usou min-height está a dizer à div que tem o tamanho do viewport e é tudo. Quando o viewport termina a sua div termina.

O código acima corrige isso ao usar min-height igual a 100% para o body. Isto significa que o elemento body pode ser esticado para além do fim do viewport, e visto que a div nele contida ter 100% da sua altura também pode ser esticada para além do final do viewport. A terceira linha é um truque e serve para dizer ao IE que a height é 100% para o IE. O IE não compreende min-height mas trata height de forma equivalente e portanto este truque funciona. Deve ser usado dentro de comentários condicionais.

Colunas Falsas

Quando se quer fazer um layout com colunas falsas, cria-se um ficheiro de imagem normalmente relativamente baixo género 10px e bastante largo com as separações nos pontos desejados com cerca de 2000px (por exemplo) e depois deste ficheiro criado coloca-se no ficheiro CSS uma regra semelhante à que se segue:

#contentor {
   background: #fff url("colunasfalsas.gif") repeat-y;
   ...
}

Para obter um fundo preto, com a nossa imagem repetida tantas vezes quantas as necessárias.

A imagem da coluna pode apresentar um dégradé.

Imagem de Fundo Clicável

Se tivermos uma imagem que esteja (ou deva estar) numa posição fixa género logo à esquerda superior e a desejemos colocar em fundo no CSS e além disso que seja possível clicar nela então podemos usar uma das várias técnicas de substituição como no código que se segue:

<a id="logoentrada" href="bla.html">Entrada</a>

#logoentrada{
  position:absolute;
  top:20px;
  left:20px;
  width:100px;
  height:70px;
  overflow:hidden;
  text-indent:-200px;
}

Como remover a border de uma imagem numa âncora

Alguns navegadores quando colocamos imagens dentro de uma âncora reproduzem a imagem com uma borda por omissão. Para a evitar basta aplicar o seguinte CSS:

a img {
 border-style: none;
 ...
}

Visto isto ser uma pergunta recorrente poderá ser interessante ler: Imagens com ligações.

Como eliminar espaço adicional colocado à volta de células de uma tabela com border

Aplicar o seguinte CSS:

img {
 display: block;
}

Se quizer saber mais pode consultar Imagens, tabelas e discontinuidades misteriosas.

Como é que funcionam os float

Por favor lei-a estes dois artigos:

Conter floats Clearing fácil

Um layout a 3 colunas

<div id="coluna1">conteudo</div>
<div id="coluna2">conteudo</div>
<div id="coluna3">conteudo</div>

Flutuar a coluna1 e a coluna2 para a left e depois indicar a margem da coluna3 como a soma do total das colunas 1 e 2 obtendo um arranjo fixo/fixo/líquido. Se desejar obter um arranjo fixo líquido fixo, basta flutuar a coluna 1 para a esquerda a coluna 2 para a direita e depois indicar as margens esquerda e direita da coluna 3 com as larguras das colunas 1 e 2 respectivamente.

Ao usar id na identificação das colunas evito os problemas de especificidade que poderiam ocorrer e respeito a regra de quando um objecto é única numa página o devo especificar no código. Assim as coisas ficam mais claras. Ficamos a saber que não são itens recorrentes

Os nomes das colunas deviam ser mais intuitivos como por exemplo barra de navegação (sem os espaços e os assentos), conteúdo, destaque (desde que mais apropriados à função desempenhada).