Vê o seu rodapé (o espaço azul entre as duas colunas)? Ele está preso lá porque não o informamos de algo muito importante: usar clear para se posicionar entre os elementos da página!
Se você passar a instrução clear: left para um elemento, ele imediatamente vai se mover para baixo de todos os elementos flutuantes do lado esquerdo da página; isso também serve para os elementos da direita, right. Se você disser clear: both, ele vai sair do caminho dos elementos flutuantes da esquerda e da direita!
A sintaxe é aquela com a qual você já está acostumado:
Código: Selecionar todos
element {
clear: /*right, left, ou both (direita, esquerda, ou ambos)*/
}Código: Selecionar todos
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>Código: Selecionar todos
div{
border-radius:5px;
}
#header{
height:50px;
background-color:#F38630;
margin-bottom:10px;
}
.left {
height:300px;
width:150px;
background-color:#A7DBD8;
float:left;
margin-bottom:10px;
}
.right{
height:300px;
width:450px;
background-color:#E0E4CC;
float:right;
margin-bottom:10px;
}
#footer{
height:50px;
background-color:#69D2E7;
clear:both;
}