Novato en CSS3 DUDA

[provocoaa]

Hola, estoy aprendiendo CSS3, creo que lo he entendido mas o menos todo pero ahora quiero llevarlo a la practica. Estoy copinando la portada de la web de la rae http://www.rae.es.

He hecho un div contenedor y dentro un div con float left, otro con float right y el central. Lo he terminado todo pero el problema viene cuando hago zoom, la columna derecha se "come" a la central y cuando la central no le queda espacio se va hacia bajo.

He probado dando un max-width a los div, he puesto las anchuras con % pero nada me lo soluciona. Me gustaria saber saber que haceis vosotros para resolver estos problema.

Gracias.

[Zeromm]

y ¿porque haces zoom?

[provocoaa]

Iniciado por Zeromm

y ¿porque haces zoom?

Para ver como se veria en pcs con resoluciones mas altas. O no tiene nada que ver?

[pzin]

Mejor pon el código HTML/CSS implicado.

[provocoaa]

Código:

#contenedor {
	width: 100%;
	overflow: hidden;
	background: rgba(182, 196, 214, 0.96);
	max-width: 100%;
}

.contenedor_lateral { -> Columna izquierda
	float: left;
	width: 20%;
	max-width: 235px;
}

.derecha {
	float: right;
	width: 31.5%;
	margin: 10px 10px 0px 0px;
	max-width: 380px;

}

.central {
	margin-left: 16%;
	margin-top: 10px;
	padding-left: 50px;
	max-width: 100%;
	width: 47.5%;
	
}

[pzin]

Si mezclas medidas fijas con medidas medidas relativas pues pasan esas cosas. Tienes anchos con medidas relativas y márgenes con medidas relativas y fijas.

[provocoaa]

Iniciado por pzin

Si mezclas medidas fijas con medidas medidas relativas pues pasan esas cosas. Tienes anchos con medidas relativas y márgenes con medidas relativas y fijas.

Pensaba que los margenes daba igual ponerlas con unidades fijas mientras que el ancho tuviera una medida relativa.

Gracias por tu ayuda.

[pzin]

Los márgenes ocupan parte del ancho también. Y a menos que cambies el modelo de caja de CSS, también lo harán los rellenos y los bordes.

[GekoDH]

Ten en cuenta que al mezclar medidas fijas y relativas hay que calcular muy bien (o mejor usarlas todas relativas) porque si por ejemplo tienes dos divs con un 49% de ancho te queda un 2% del ancho disponible, en algunas resoluciones en ese 2% te pueden caber 50px de padding y en otras no.

Lo mejor, usar relativas para todo o bien darle a los divs la propiedad box-sizing: border-box; esto hace que en el ancho del div se incluya todo menos el margin (padding y border) con lo cual sólo tendrías que calcular los margins para que quepan en el espacio disponible.

Hay que tener en cuenta que cuando le das un ancho a un elemento se lo estás dando a su contenido, el margin, padding y border van a parte y se suman (excepto con el box-sizing: border-box; que sólo se suma el margin)

[provocoaa]

Iniciado por pzin

Los márgenes ocupan parte del ancho también. Y a menos que cambies el modelo de caja de CSS, también lo harán los rellenos y los bordes.

Iniciado por GekoDH

Ten en cuenta que al mezclar medidas fijas y relativas hay que calcular muy bien (o mejor usarlas todas relativas) porque si por ejemplo tienes dos divs con un 49% de ancho te queda un 2% del ancho disponible, en algunas resoluciones en ese 2% te pueden caber 50px de padding y en otras no.

Lo mejor, usar relativas para todo o bien darle a los divs la propiedad box-sizing: border-box; esto hace que en el ancho del div se incluya todo menos el margin (padding y border) con lo cual sólo tendrías que calcular los margins para que quepan en el espacio disponible.

Hay que tener en cuenta que cuando le das un ancho a un elemento se lo estás dando a su contenido, el margin, padding y border van a parte y se suman (excepto con el box-sizing: border-box; que sólo se suma el margin)

Gracias a los dos, ahora me queda mucho mas claro.

A seguir aprendiendo