Caixa 2

Flutua à esquerda

#caixa2 {
background-color: #CCC;
margin: 0px;
padding: 10px;
height: 300px;
width: 300px;
float: left;
}

Caixa 3

Flutua à esquerda

#caixa3 {
background-color: #999;
margin: 0px;
padding: 10px;
height: 200px;
width: 350px;
float: left;
}

Caixa 4

Flutua à esquerda

Posicionamento relativo
para conter a caixa 5

#caixa4 {
background-color: #666;
margin-top:20px;
padding: 10px;
height: 600px;
width: 500px;
float: left;
position: relative;
left: 20px;
}

#caixa5 {
background-color: #FFF;
margin: 0px;
padding: 10px;
height: 300px;
width: 200px;
position: absolute;
top: 50px;
right: 50px;
}

Caixa 6

Posicionamento
absoluto

#caixa6 {
height:300px;
width:150px;
padding:10px;
background-color:#FFF;
position:absolute;
right:0;
top:0;
}

Caixa 7

Posicionamento
fixo

#caixa7 {
width:90px;
height:250px;
padding:5px;
background-color:#CCC;
position:fixed;
left:0;
top:50px;
}

Três DIVs dentro de uma DIV contentor.
Seguem o fluxo normal de posicionamento: de cima para baixo. Com a aplicação de flots a cada uma delas, posicionam-se à esquerda umas das outras.
A DIV cinco tem um posicionamento absoluto. Porque é que não se posiciona face à janela do browser?
O que é que acontece se tirarmos o posicionamento relativo à DIV quatro?

#caixa1 {
	background-color: #FFF;
	padding: 20px;
	height: auto;
	width: 900px;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
}