Problema conceptual: Bordes, paddings, y floats

[margancia]

Hola a todos!

Quería hacer una consulta que tengo desde hace un tiempo. Tengo un problema conceptual que no logro entender. Por un lado, cómo hacer paddings y bordes de divs y por otro como hacer para que me queden bien los divs cuando tengo por ejemplo uno alineado a la izquierda otro a la derecha y luego otro abajo.

Tengo armado un css con estas dudas y quisiera saber su opinión acerca de que se podría cambiar para que funcione en ie 6+, mozilla etc.

El código ejemplo:

Código CSS:

<style type="text/css">
 
.top{
width:100%;
background:blue;
margin-bottom:20px;
}
 
.contenedor{
width:100%;
}
 
.contenedor-b{
padding:20px;
border:solid 1px red;
}
 
.contenido-l{
background:red;
float:left;
}
 
.contenido-r{
background:green;
float:right;
}
 
.footer{
width:100%;
margin-top:20px;
background:yellow;
}
 
/* clearfix */
 
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
.clearfix {
display:block;
}
* html .clearfix {
height:1px;
}
 
</style>
 
 
 
<div class="top">Top</div>
 
 
<div class="contenedor"><div class="contenedor-b">
 
<div class="contenido-l">Izquierda</div>
<div class="contenido-r">Derecha<br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
<div class="clearfix"></div>
</div></div>
 
<div class="footer">Footer</div>
 

Nota1: Lo que sigue al texto comentado en el css clearfix es un hack que saqué de http://www.csslab.cl/2006/07/20/flot...incertidumbre/

Nota2: El código que puse recién se ve mal en ie 6,7, pero en mozilla se ve bien.


Ya que bordes paddings y floats es lo que más uso, me gustaría saber cómo sería la manera ideal para hacerlo según las buenas costumbres. Es decir no me interesa corregir este si está mal la base sino entender la mejor manera de hacerlo.

Cualquier opinión u ayuda es más que agradecida!