Caixa 2

#caixa2 {
	background-color: #CCC;
	margin: 0px;
	padding: 10px;
	height: 350px;
	width: 500px;
}

Caixa 3

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

}

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

Foram aplicados dois floats: à esquerda para a caixa três e à direita para a caixa quatro.
E um clear both para esta DIV. De outra forma este texto não estaria aqui em baixo.

#texto {
clear: both;
padding: 15px;
background-color: #FFFF33;
}

Imediatamente antes desta div, existe uma quebra de linha com uma classe clear.

.clear{ 
clear: both;
}

Experimenta retirar o clear à classe .texto e a quebra de linha. Aplica só o clear à classe .texto. Aplica só a quebra de linha com uma classe .clear