Layout de 3 Colunas.

Layout básico de 3 Colunas.

Estrutura HTML:
<div id=weblivre>
                <div id=esquerda>Coluna ao lado esquerdo.</div>
                <div id=direita>Coluna ao lado direito.</div>
                <div id=conteudo>Coluna central onde ira conter o Conteúdo</div>
</div>

Montando a estrutura CSS:
Começando construiremos a coluna geral que ira especificar o tamanho do documento, e lhe daremos o nome weblivre, essa será a id.
E especificaremos seu tamanho com width:650px;

#weblivre {
            width:650px;
}

E em seguida iremos construir a coluna da esquerda, flot:left esta sendo usado para setar a posição da div esquerda ao lado esquerdo.

#esquerda {
            width:175px;
            float:left;
}

A coluna da direita é bem semelhante a da esquerda, só que usaremos outra propriedade ao float, que será right atribuindo a posição da coluna para a direita.

#direita {
            width:175px;
            float:right;
}

Agora montaremos a coluna central, responsável pelo conteúdo.
margin-left:185px; é usado para especificar uma margem à esquerda, para se alinhar corretamente no documento, e não ficar em cima da coluna lateral esquerda, para resolver esse problema eu o utilizei.

#conteudo {

width:280px;

margin-left:185px;

}

Codigo Limpo:
<style type="text/css">
#weblivre {
                width:650px;
}
#esquerda {
                width:175px;
                float:left;
}
#direita {
                width:175px;
                float:right;
}
#conteudo {
            width:280px;
            margin-left:185px;

}
</style>
<div id=weblivre>
                <div id=esquerda>Coluna ao lado esquerdo.</div>
                <div id=direita>Coluna ao lado direito.</div>
                <div id=conteudo>Coluna central onde ira conter o Conteúdo</div>
</div>

Autor: Renan Schiavinoto