Diseño web CSS dos, tres, cuatro columnas con float ¿width en porcentajes no funciona? Ejemplos (CU01036D)

Resumen: Entrega nº36 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01036D

 

 

DISEÑO EN COLUMNAS

Uno de los usos habituales de float y clear es crear diseños donde las cajas tienen distintos tamaños y se crean una cabecera de página web, una parte central, una o varias columnas laterales y un espacio en la parte inferior denominado pie o footer. Veamos cómo podemos generar este tipo de diseños usando CSS.

css

 

Vamos a partir de este código HTML:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01036DA.css">
</head>
<body>
<div id="caja1">Caja 1</div> <div id="caja2">Caja 2</div>
<div id="caja3">Caja 3</div> <div id ="caja4">Caja 4</div>
</body>
</html>

 

 

Y el siguiente código css de partida (ponle el nombre de archivo adecuado):

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px; margin:7px; padding:7px; background-color: #FFEFD5; }
#caja1{ border-color:red;}
#caja2{ border-color:blue; }
#caja3{ border-color:green;}
#caja4{border-color:orange;}

 

 

La situación de partida es que simplemente tenemos cuatro cajas (dentro de las cuales se supone que vamos a organizar los diferentes contenidos de la página web):

modelo cajas css

 

 

ANCHURA Y ALTURA ESPECIFICADA Y TOTAL DE UN ELEMENTO ¿WIDTH NO FUNCIONA?

¿Cuál es el valor de la propiedad width de la caja 1? Viendo el dibujo y el código podríamos pensar que el cálculo para obtener este ancho sería: 410 px totales – 7px * 2 lados = 396 píxeles

Sin embargo, el valor de la propiedad width se refiere al ancho del espacio que ocupa el contenido del elemento excluido el margen, borde y padding. Esto nos lleva a que el width de la caja 1 se calcule como 410 px totales – 7 px * 2 márgenes – 7 px * 2 paddings – 2px * 2 bordes = 378 píxeles ¿Por qué es esto así?

Podemos pensar en distintos tipos de anchura (nos referiremos a anchura, aunque para altura es igualmente válido lo que expondremos). La anchura “declarada” es la anchura que especificamos al dar un valor a la propiedad width. La anchura “aparente en pantalla” es la anchura que aparenta tener el elemento en la pantalla (hasta el borde visible, si existe). La anchura total asociada al elemento se obtiene como margin + border + padding + width (en horizontal para widht, o de la misma forma en vertical para height)

Al declarar un valor width para un elemento hijo en porcentajes, se toma como valor de referencia el valor de la propiedad width de su elemento padre. Esto puede generar efectos extraños y hace que mucha gente piensa que “width en porcentajes no funciona”. En realidad sí funciona, pero hay que saber cómo. Escribe este código y visualiza los resultados:

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0;}
div{ border-style:solid; border-width:1px; height: 115px;}
#caja1{width:410px; }
#caja2{width:410px;  margin-left:20px;}
#caja3{width:410px;  margin-left:20px; padding-left:20px;}
#caja4{width:410px;  margin-left:20px; padding-left:20px; border-left-width:20px;}
.interior {margin-top: 25px; width:100%; height:40px; background-color:pink;}
</style>
</head>
<body>
<div id="caja1">Caja 1 <div class="interior">100% caja 1</div></div>
<div id="caja2">Caja 2 con width 410 px y margin-left 20px<div class="interior">100% caja 2</div></div>
<div id="caja3">Caja 3 con width 410 px, margin-left 20 px y padding-left 20px<div class="interior">100% caja 3</div></div>
<div id ="caja4">Caja 4 con width 410 px, margin-left 20 px,
 padding-left 20px y border-left-width 20 px<div class="interior">100% caja 4</div></div>
</body>
</html>

 

¿width no funciona css?

 

 

Observamos algunas cosas “extrañas”:

a) En la caja 1 vemos cómo la caja interior en color rosado sobresale “ligeramente” por el lado derecho ¿Por qué? Esta caja rosada interior se posiciona justo en la esquina interior del borde superior izquierdo de la caja contenedora (caja 1). Luego es desplazada hacia abajo 25px debido a la propiedad margin-top que tiene establecida. A continuación se dibuja ocupando un espacio de 1px como ancho del borde izquierdo + 410 px de contenido + 1 px de borde derecho. El ancho visible en pantalla (delimitado por los bordes) es de 412 px, igual que el de su caja padre, pero está ligeramente desplazada hacia la derecha, de ahí que sobresalga ligeramente por la derecha.

b) En la caja 3 vemos que la caja interior con un ancho del 100% no toma las dimensiones de la caja 3, sino que es más pequeña. ¿Por qué? Porque el borde que vemos de la caja 3 incluye el padding aplicado a la caja 3 de 20 px de modo que la caja 3 “se ve en la pantalla” con un ancho de (410 px de contenido + 20 px de padding-left + 2 px de bordes) = 432 px. Sin embargo la caja interior tiene el 100 % del valor width de su caja contenedora, es decir, 410 px, más 2 px de borde, con lo que se ve con un ancho de 412 px.

 

En resumen, hay que tener siempre presente que los valores width y height son los relativos al contenido de un elemento excluido el padding, borde y margen. El ancho apreciable en pantalla de un elemento puede ser superior al establecido con width debido al padding y al borde. El ancho total asociado a un elemento puede ser superior al establecido con width debido al padding, al borde y al margin.

 

 

CREAR UN DISEÑO

Ahora vamos a utilizar el código CSS para crear un diseño con cabecera, una columna lateral izquierda, un espacio principal y un pie de página o footer.

Escribe el siguiente código CSS y comprueba los resultados sobre el código HTML de las cuatro cajas:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
 background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
 410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/

#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
 width:75px; float:left; height:200px; }
/*Ancho total 410 px - 8px bordes - 21 px de margin - 28 de padding -75px contenido caja 2
 obtenemos 278 px*/

#caja3{ margin:0 7px 7px 0px; border-color:green;
 width:278px; float: left; height: 300px;}
#caja4{border-color:orange; clear:both; height:55px;}

 

css diseño en columnas

 

 

Hemos aplicado unos valores de height para poder visualizar el diseño. En una web real height puede quedar sin especificar, de modo que las cajas irán agrandando su tamaño en vertical en función de la cantidad de contenido que alberguen.

 

 

EJERCICIO RESUELTO

Escribir el código CSS para crear un diseño similar al anterior pero con cabecera, una columna lateral izquierda, un espacio principal y una columna lateral derecha.

 

 

SOLUCIÓN

Añadiremos esta línea como última línea del código HTML, antes del cierre de body, para restablecer el flujo normal (realmente no tenemos elementos debajo y no sería necesario hacerlo, pero podríamos tenerlos):

<div class="limpiador"></div>

El código CSS sería:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
 background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
 410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/

#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
 width:65px; float:left; height:200px; }
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
 -65 px contenido caja 4 obtenemos 198 px*/

#caja3{ margin:0 7px 7px 0px; border-color:green;
 width:198px; float: left; height: 300px;}
#caja4{ margin:0; border-color:orange; float: left; width:65px; height:200px;}
.limpiador {clear:both; padding:0; border-style:none; }

 

 

Comprueba los resultados en tu navegador.

Ten en cuenta que este es un posible código para obtener un diseño como el propuesto. Quizás a ti se te haya ocurrido otro código y será igualmente válido (o incluso mejor que este). Por ejemplo, no hay por qué usar px para fijar las dimensiones, podríamos usar % ó em u otras unidades. Ten en cuenta que CSS y el diseño web no son matemáticas. Lo importante es obtener el resultado deseado y generar un código lo mejor posible, pero no el “código perfecto” porque este no existe (o requeriría demasiado tiempo trabajar para conseguirlo, sin obtener ventajas a cambio).

 

 

EJERCICIO

Define un documento HTML donde a través del uso de la propiedad float y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

Bienvenidos a aprenderaprogramar.com (color de fondo: #DEB887)

Menú

-Cursos

-Humor

-Divulgación

Conoce las últimas novedades del lenguaje JavaScript. (color de fondo: #ADD8E6)

Espacio reservado para publicidad

Artículo sobre Gimp, un programa de software libre para el diseño gráfico. (color de fondo: #90EE90)

Contacta con nosotros (color de fondo: #DDA0DD)

Aviso legal

 

 

Nota: los anchos de los elementos serán del 100 % disponible si es todo el ancho (por ejemplo <<Bienvenidos>>), del 25 % si es una columna simple (por ejemplo <<Menú>>) y del 50 % si es una columna doble (por ejemplo <<Artículo sobre Gimp>>). Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación