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!

[webosiris]

hola!
muy positiva tu actitud, entender lo que uno está haciendo es el único camino para realmente aprender, sino terminás copiando y pegando csas que no sabes ni porqué.

voy a analizar tu código.

1) el elemento DIV, igual que todos los otros elementos de bloque, tienen por defecto un width automático que equivale a "todo el espacio disponible" Por lo tanto no es necesario que le pongas width:100% a los divs [lo explico en el punto 3].

2) entiendo que tienes 2 contenedores porque un width del 100% + 40px de padding evidentemente suma más del 100%. Sin embargo sabiendo lo que te dije en el punto 1, puedes eliminar totalmente el width, y con eso se va la necesidad de tener .contenedor-b [de aquí hasta el final voy a considerar que .contenedor-b ya no existe]

3) Para entender lo de los paddings y borders, tienes que entender lo que es el modelo de cajas que generan los elementos en bloque (DIV, P, H1-H6, etc) . Eso se resume de la siguiente manera:
ancho total = margin izq + border izq + padding izq + width + padding der + border der + margin der

si no especificas ningún width, por defecto el width tiene un valor "auto", y equivale a todo el espacio que esté libre una vez descontados el padding, border y margin.

4) Los floats. El gran dolor de cabeza de los que empiezan, vas a ver que en realidad no es algo tan difícil cuando se entiende que es lo que pasa.

Cuando flotas un elemento, lo que haces es quitarlo del flujo de contenido. Eso significa, entre otras cosas, que la altura del elemento flotado no es considerada para calcular la altura del elemento que lo contiene (elemento padre, en este caso tu div contenedor). Esto implica que, si un elemento tiene dentro solo elementos flotados (como es el caso de tu .contenedor), su altura calculada va a ser 0. Para corregir esto y que el .contenedor "vea" los divs flotados, se pueden usar diferentes técnicas, en un proceso que se conoce como LIMPIAR LOS FLOATS.

- Una de esas técnicas es la que tu enlazas (pero que la aplicaste mal, ya que la clase "clearfix" hay que asigársela al contenedor, no a un div extra), pero que data 2006, y ha llovido mucho desde entonces. Aquí tienes la misma técnica pero actualizada. Puedes ver el demo con el código.

La clase .clearfix (o .cf en el ejemplo moderno que te enlacé) se la debes de aplicar al div contenedor, puedes aplicar más de 1 clase a un mismo elemento simplemente separando los nombres con espacios, de esta forma:

Código HTML:

<div class="clase1 clase2 clase3">
 

- otra técnica, más sencilla (pero que tiene un inconveniente puntual que a veces imposibilita su uso), es simplemente en el css agregarle "overflow:hidden;" al .contenedor

- una tercera técnica, la más antigua pero diría que la más confiable, es agregar un div vacío (enseguida después del último elemento flotado) con el estilo "clear:both"

[margancia]

Ernesto muchas gracias por tu ayuda y el tiempo dedicado en cada punto.

Tengo algunas dudas respecto a estos puntos:

2- En realidad lo que quería ejemplificar era un div con un borde y padding. Suponiendo que el div (que contiene adentro los dos floats) mide 200px y se necesite que tenga un padding de 20px, sería correcto usar dos divs en el maquetado? Quedaría así:

Código CSS:

.contenedor{
width:200px;
background:#fff;
margin:20px;
}
 
(el contenedor general que mide 200px exacto, con fondo, y margen de 20px a los costados)
 
.contenedor-b{
padding:20px;
border:solid 1px red;
}
 
(asignarle al conteneedor de arriba el borde y padding aparte para que no lo sume en los 200px)
 

3-

Iniciado por webosiris

ancho total = margin izq + border izq + padding izq + width + padding der + border der + margin der

Esto rige para todos los navegadores por igual?

4- Esta clarísimo este punto! No me decido entre agregar el div vacío con estilo "clear:both" o la versión actualizada. Probé los dos en varios navegadores y funcionan de igual manera. Vos cual preferís?

[webosiris]

2- En realidad lo que quería ejemplificar era un div con un borde y padding. Suponiendo que el div (que contiene adentro los dos floats) mide 200px y se necesite que tenga un padding de 20px, sería correcto usar dos divs en el maquetado?

no entiendo porqué necesitas ese 2° div, si lo puedes hacer todo con 1 solo:

Código CSS:

.contenedor{
width:200px;
background:#fff;
margin:20px;
padding:20px;
border:solid 1px red;
}
 

Esto rige para todos los navegadores por igual?

si, salvo para el ya difunto IE 5 y el IE6 en modo Quirks (modo quircks = tener mal el doctype)

Probé los dos en varios navegadores y funcionan de igual manera. Vos cual preferís?

yo en realidad el que prefiero es overflow:hidden porque tiene lo mejor de ambos, no introduce html y además es mucho más corto que el clearfix. Cuando en determinados casos no lo puedo usar, uso un div vacío... por comodidad (y mejor compatibilidad en X situaciones con X navegadores) más que nada.

[margancia]

Gracias Ernesto. Si bien siempre creé mis códigos sin ningún programa del estilo de dreamweaver y bajo estándares, muchas cosas las hacía como bien comentaste en tu primera respuesta por "copiar y pegar sin saber por que". Hoy entiendo mucho mejor para que sirven algunos estilos y el doctype.

Iniciado por webosiris

no entiendo porqué necesitas ese 2° div, si lo puedes hacer todo con 1 solo:

Código CSS:

.contenedor{
width:200px;
background:#fff;
margin:20px;
padding:20px;
border:solid 1px red;
}
 

Hacerlo en dos divs tal vez es algo que heredé de no trabajar doctype en mis inicios con la web. Luego al comenzar a utilizarlo lo seguí haciendo de esa manera (en dos divs por separado).

De todas maneras pensé que era una buena costumbre hacerlo en dos divs para que quede más "prolijo" el código y a su vez, no tener que restarle el padding (x2) y bordes (x2) al width. No me recomendás que lo haga? No es una buena práctica en los maquetadores/css?

Iniciado por webosiris

si, salvo para el ya difunto IE 5 y el IE6 en modo Quirks (modo quircks = tener mal el doctype)

Qué doctype me recomendás que utilice para mi web y próximos proyectos?

Leí en la web que lo más avanzado es utilizar XHTML 1.0 Strict o xHTML 1.1 Strict. Probé mi sitio con cualquiera de los doctype que exponen en esa web y siempre se ve bien y por otro lado valida correctamente en w3c.

[webosiris]

e todas maneras pensé que era una buena costumbre hacerlo en dos divs para que quede más "prolijo" el código. No me recomendás que lo haga? No es una buena práctica en los maquetadores/css

técnicamente es algo innecesario, y en cualquier lenguaje escribir código innecesario no es algo recomendable.

Qué doctype me recomendás que utilice para mi web y próximos proyectos? Leí en la web que lo más avanzado es utilizar XHTML 1.0 Strict o xHTML 1.1 Strict.

esa web tiene un error, el XHTML 1.1 Strict no existe, es 1.1 a secas (de todas formas son especificaciones muy similares).

Yo normalmente uso XHTML 1.0 Strict o HTML5, dependiendo de las necesidades. Pero cualquiera es bueno, mientras te atengas a la especificación de ese doctype. No tienen nada que ver con el nivel de conocimientos que tengas.