Aprendiendo a estructurar paginas con DIVs – Tutorial HTML
Bueno seguimos avanzando con la penultima leccion del curso, Manos a la obra 
Bueno ya vimos en la leccion anterior un ejemplo de como los divs sirven para encapsular elementos en forma de cajas y tambien vimos un repaso de los elementos mas utilizados a la hora de crear una pagina web.
Ahora lo que haremos sera incluir un ejemplo de una web con dos columnas a modo de ejemplo y luego veremos porque se forma en dos columnas, la explicacion a esto es uno de los temas que mas dolores de cabeza da al principio a quienes quieren maquetar “sin tabla”, la explicacion de como funcionan las propiedades float:right/left y clear:both;
Una introduccion basica al float
Como hemos visto en todos los ejemplos generalmente los elementos de html se colocan uno abajo del otro, es decir, si uno coloca una imagen y luego un texto en un documento HTML, el resultado que obtendra es una imagen y abajo de la misma el texto. Este efecto pasa con la mayoria de los elementos en HTML.
La explicacion de porque sucede esto es que cada elemento viene con una configuracion predeterminada, y los elementos que se ubican uno debajo del otro tienen seteado por defecto la propiedad float como none.
Esto hace que los elementos se comporten de esa manera, ahora la pregunta seria ¿como hacer para que se compoten de otra forma?
La propiedad float nos permite ubicar elementos a la derecha o izquierda en vez de colocarse siempre abajo del anterior, por ejemplo para ubicarlo a la derecha, se logra seteando con float: right desde el css al elemento. Y que se coloque a la izquiera es con float: left… Aunque parezcan sencillas las cosas asi como se dicen a la hora de diseñar hay varios problemas que se presentan con este modelo, pero todo tiene solucion. La mejor forma de aprender es con experiencia diseñando una y otra vez y cuando sale un problema arreglarselas de alguna forma para solucionarlo!
Por ello veremos como hacer una web cuya forma sea de un encabezado con un menu como columna izquierda y algun contenido como columna derecha, aqui el codigo, como siempre y esta vez mas que nunca, prueben agregar cosas, quitar propiedades a ver que sucede, agregar nuevas y experimentar:
<html> <head> <title>Pagina con dos columnas!</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fef} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #669A00; color: #1A1C1E;} #columna{ width: 200px; float: left; background: #eee} #contenido{ width: 580px; float: left; background: #CCCCCC; padding: 5px 10px 5px 10px;} #pie{clear: both;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div> <div id="columna"> <ul> <li>Home</li> <li>Carta</li> <li>Quienes Somos</li> <li>Donde estamos y como llegar</li> <li>Contactenos</li> </ul> </div> <div id="contenido"> <h2>Quienes Somos</h2> <p>LA VAQUITA es un lugar especial en donde podes disfrutar de una de las costumbres mas ricas de la Argentina, una rica parrillada.</p> <p>Un ambiente confortable, comodo y orientado a estar en el campo o una estancia, pero ubicado en pleno corazon de Capital Federal.</p> <h2>Nuestra Parrilla Libre</h2> <ul> <li>Asado</li> <li>Vacio</li> <li>Pollo</li> <li>Bondiola</li> <li>Arrollado de pollo</li> <li>Provoleta</li> <li>Pechito de cerdo</li> <li>Matambre a la pizza</li> <li>Chorizo</li> <li>Chinchulines</li> <li>Morcilla</li> <li>Riñon</li> </ul> </div> <div id="pie"> <p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Nuevamente se aclara que en este ejemplo no se busca un diseño bello y atrativo, sino que solo las ubicaciones de los elementos, tambien aprovecho para avisar que en la proxima leccion crearemos esta pagina con todas su secciones completas y con un diseño un poco mas interesante que este. Pero antes que eso todavia faltan aprender otras cosillas.
Propiedades ID y CLASS
En el ejemplo anterior aparecieron dos elementos nuevos dentro de algunos tags (las propiedades id y class) como por ejemplo en
<div id="encabezado"> <h1>Restaurant LA VAQUITA</h1> <h3>Disfrute una exquisita parrillada, con la mejor atencion y un precio increible</h3> </div>
En el ejemplo de arriba lo que hace el identificador ID es proporcionarnos un metodo para instanciar un div en este caso el encabezado. ¿Para que sirve exactamente? bueno sirve para poder aplicarles propiedades css al elemento que se especifica, tambien es util cuando se trabaja por ejemplo con javascript pero eso es algo que aqui no lo veremos.
¿Como se instancia ese elemento desde el CSS? para instanciar el encabezado por ejemplo desde el CSS lo que hacemos el colocar # (numeral) + nombre del identificador, en nuestro ejemplo seria #encabezado{ aqui las propiedades del CSS que valen para el elemento con id = “Encabezado” }
Un ejemplo practico:
<html> <head> <title>Aprendiendo que es la propiedad ID</title> <style> #rojo{ color: red; } </style> <head> <body> <p>Este es un texto</p> <p id="rojo">este es un texto con ID = "rojo"</p> </body> </html>
Como veran, el parrafo que contiene el ID=”rojo” se pone de color rojo porque se lo indicamos desde el CSS. Tambien podemos aclarar que elemento es es decir no solo colocar el #rojo sino que se puede colocar p#rojo lo que identifica mejor el elemento y nos permite saber mirando el codigo css que ese elemento es para un parrafo.
Los elementos ID deben ser unicos en la pagina, es decir, no puede haber dos elementos con el mismo ID en un mismo documento HTML. Si lo que deseamos es crear varios elementos que tengan un estilo de css en comun, el identificador necesariamente tiene que ser un CLASS, y la forma de instanciar un class desde CSS es con . (punto) + nombre del elemento, como en el siguiente ejemplo seria p.impar y p.par:
<html> <head> <title>Aprendiendo que es la propiedad CLASS</title> <style> p.impar{ background: #eeeeee; } p.par{ background: #dddddd; color: blue;} </style> <head> <body> <p class="impar">Este es nuestro parrafo numero 1 (impar)</p> <p class="par">Este es nuestro parrafo numero 2 (par)</p> <p class="impar">Este es nuestro parrafo numero 3(impar)</p> <p class="par">Este es nuestro parrafo numero 4(par)</p> </body> </html>
Basicamente esta es la mayor utilidad de estas dos propiedades MUY IMPORTANTES para el diseño de una pagina, ya que nos permite ponerles nombres a los elementos!. La utilizacion de estas propiedades funcionan para todos los elementos de html, es decir a todos los elementos les podemos colocar la propiedad ID o Class segun corresponda para poder instanciarlos, sean estos elementos divs, p, a, span, ul, li, etc…
La propiedad Clear
Esta propiedad sirve para limpiar el display de los floats anteriores, es decir para ser mas claro uno por ejemplo puede tener el caso de una presentacion deproductos en columnas de 3, entonces lo que se puede hacer es colocar divisores con un ancho del 33% y asignarles a todos un float: left, como siempre mejor que explicar es que lo vean ustedes mismos y revisen el codigo:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> </div> </body> </html>
A no desesperar si no entienden algo, lo que hice fue decirle por medio de CSS que todos los elementos div que se encuentran adentro de el div con id contenedor tengan ciertas propiedades, es decir para instanciar todos los divs de adentro de un elemento especifico lo que se hace es:
elemento#nombre elementos{} o elemento.nombre elementos{}
en este caso: div#contenido div{} /*nos dice las propiedades que les ponemos a TODOS los divs contenidos en div#contenido */
Por otro lado a cada elemento se asigno un ancho de 252px y les digo que tengan un float: left, lo que los ubica uno al lado del otro con un margen ademas para que se separen. Y la linea
contenido div h2{text-align: center;} nos dice que simplemente centremos los titulos de cada producto.
Bueno ademas de todo esto que dije antes quizas las personas que son muy observadoras se dieron cuenta que pusimos que el fondo de contenido sea de color #F1F5F8 y en realidad se ve de color #cccccc, PUES ESTO ES UN ERROR CLASICO QUE BUSQUE QUE SUCEDA, al colocar elementos en float y no cerrarlos con un Clear: both, entonces el div contenedor no se comportara normalmente estirandose todo lo que necesitamos, por el contrario quedara asi como lo estas viendo. La solucion es bastante sencilla, Quizas hay mejores, yo siempre he utilizado que al elemento siguiente que existe le colocamos un clear: both y el problema esta resuelto.
Si no hay elemento me invento un div de un pixel de ancho y le coloco el clear both, aunque hay otras soluciones yo siempre termine aplicando esta que no es la mas elegante de todas pero bueno.
Aqui la pagina con el problema resuelto:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h2{text-align: center;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <div> <h2>Notebook Acer 5536</h2> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 515</h2> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook dell 1520</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h2>Notebook Toshiba L305</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Acer 5526</h2> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Compac 815</h2> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h2>Notebook Dell 1772</h2> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h2>Notebook Toshiba M375</h2> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Bueno ademas de para solucionar ese problema el clear both nos sirve para decirle que se termine algun float, es decir como habran visto el elemento se ubica a la izquierda siempre por lo que si uno quiere especificamente empezar de nuevo el listado no puede, otra vez un ejemplo:
<html> <head> <title>tres columnas de productos</title> <style> body{background:#ddd; color: #1A1C1E;} #centro{width: 800px; margin: 10px auto 0 auto; border: 1px silver solid; background: #fff} #encabezado{width: 780; padding: 10px 10px 10px 10px; background: #005682; color: white;} #contenido{ background: #F1F5F8; padding: 5px 5px 5px 5px;} #contenido div{width: 252px; float: left; background: white; margin: 4px 3px 0 0; height: 200px; border: 2px solid silver} #contenido div h3{text-align: center;} #contenido h2{ clear: both; margin-left: 15px; padding-top: 15px;} #pie{clear: both; text-align: center; padding-top: 10px;} </style> <head> <body> <div id="centro"> <div id="encabezado"> <h1>Listado de Productos</h1> </div> <div id="contenido"> <h2>Notebooks Acer</h2> <div> <h3>Notebook Acer 5536</h3> <ul> <li>15.6 Pulgadas</li> <li>Athlon X2 2.1</li> <li>3gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <div> <h3>Notebook Acer 5526</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <h2>Notebooks Compac</h2> <div> <h3>Notebook Compac 515</h3> <ul> <li>14 Pulgadas</li> <li>Athlon X2 2.1</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h3>Notebook Compac 815</h3> <ul> <li>15,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Compac 585</h3> <ul> <li>17 Pulgadas</li> <li>Athlon X2 2.3</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Compac c415</h3> <ul> <li>14,6 Pulgadas</li> <li>Athlon X2 2.04</li> <li>3gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <h2>Notebooks Dell</h2> <div> <h3>Notebook dell 1520</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>2gb Ram</li> <li>Disco 160Gb</li> </ul> </div> <div> <h3>Notebook Dell 1772</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.2</li> <li>4gb Ram</li> <li>Disco 320Gb</li> </ul> </div> <h2>Notebooks Toshiba</h2> <div> <h3>Notebook Toshiba L305</h3> <ul> <li>15 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>4gb Ram</li> <li>Disco 250Gb</li> </ul> </div> <div> <h3>Notebook Toshiba M375</h3> <ul> <li>15,6 Pulgadas</li> <li>CORE2DUO 2.1</li> <li>3gb Ram</li> <li>Disco 500Gb</li> </ul> </div> </div> <div id="pie"> <p>copyright ® 2010 - Curso de HTML <a href="http://www.blogdelaweb.com.ar">Blog de la Web</a></p> </div> </div> </body> </html>
Firjarse que en este ejemplo organice las notebooks por marca, y parece que todo es normal pero si se fijan cada vez que dice Notebooks
Bueno, Creo que esta leccion se hizo algo larga, por lo que la dejamos aca y como recomendacion les propongo que armen distintas estructuras webs, con los que se les ocurra y vallan viendo como solucionar los problemas, basicamente esto se aprende por el famoso metodo prueba y error, porque no vale la pena aprenderse todas las variaciones posibles, sino que a medida que se aparecen ver como resolverlas y con el tiempo uno se termina acostumbrando.
Por otra parte las propiedades float y clear estan incluidas para TODOS los elementos HTML y funcionan de igual forma que en los divs
Espero que nos veamos en la proxima leccion!
Siguiente Lección >>
>> Indice de Contenido <<
¿Que Podes seguir leyendo?
Te gusto el Post?
Ayudame a difundirlo!
Loading ...
12 enero 2010 at 1:19 | jorge
cuando llega la siguiente leccion estoy impaciente !!
12 enero 2010 at 19:40 | jorge
acavo dar otra pasada a esta leccion ya que me habia quedado con dudas, pero voy bien a practicar en lo que llega la siguiente leccion !!
12 enero 2010 at 20:00 | dacho
@jorge, lo que podes hacer mientras tanto es ver este articulo:
http://www.blogdelaweb.com.ar/reemplazo-de-texto-por-imagenes-mediante-css/
Que te da una herramienta basica para el diseño, y te muestra como colocarle fondo a los elementos de HTML con la propiedad background de CSS.
Podes probar colocandole degrades y otras cosas a las distintas paginas que creaste en el tutorial o crear una pagina propia e ir jugando con todo.
De eso se trata aprender a maquetar web, de jugar con los elementos que el HTML y el CSS nos proveen para dar un diseño creativo y profesional a las paginas.
Si realizaste todas las lecciones ya estas preparado para intentar aprender por tu cuenta
12 enero 2010 at 20:02 | dacho
Ademas de eso si te interesa todo el mundo de la web podes mirar el tutorial de Posicionamiento al que le falta muchisimo porque lo empece hace muy poco pero tiene informacion util que seguro te servira en un futuro.
18 enero 2010 at 18:27 | jorge
momento que diferencia hay entre
y
18 enero 2010 at 18:30 | jorge
*/*/
*/*/
entre esto que diferencia hay ??
18 enero 2010 at 18:31 | jorge
bueno que no sale mi duda es sobre que dif hay entre usar el CLASS y el ID
18 enero 2010 at 19:00 | dacho
@jorge, la diferencia entre ID y CLASS es que:
ID: se utiliza si es un elemento unico
CLASS: Se Utiliza cuando el elemento se puede llegar a repetir o se repite mejor dicho.
Definido de otra forma, no debe haber dos elementos con el mismo ID en la pagina, con class no hay problema!…
Son Reglas del HTML
23 mayo 2010 at 18:59 | Arts
Solo puedo decir que con este tutorial que me lo he comido como si fuera uno de mis libros favoritos, es lo mejor que he visto en muuuuuuucho tiempo a modo de tutorial. No solo he recordado html que ni me acrodaba, sino que encima he aprendido todo de forma practica. Te mereces un premio por este tutorial. Me metí un batacazo en clases con Mysql, php, html y no me meti en css por lo pesado que se me hacian los tutoriales terminando aborrenciendolo, no habia nada entertenido. Sin embargo este tutorial me ha sorprendido, estoy encantado con el. De todos los tutoriales y explicaciones de profesores ( que a fin de cuentas deberían saber enseñar y no tienen ni idea van como si ya supieras todo, este tutorial me ha enseñado bastante mas que en 2meses otrs pdf, libros y profesores juntos.
24 mayo 2010 at 14:36 | Arts
Tengo una dudilla y se trata del ultmo codigo, hago lo que dices del clearboth pero de alguna manera me sale el mismo error que en el antepenultimo codigo, sale azul y la ultima sección donde solo hay 2 cuadros toshiba sale en blanco.
25 mayo 2010 at 21:35 | dacho
Hola @Arts, Te sigue sucediendo lo mismo? o lo pudiste solucionar?
26 mayo 2010 at 13:41 | arts
He conseguido de alguna manera subsanar lo que me salia mal poniendo simplemente un hight en el contenido, pero no me gusta mucho esa solución. Me parece un poco chapucera, como restringir las dimensiones de la pagina, claro esta que como soy tan noobie aun en esto no se si esque realmente hay que darle las dimensiones fijas o hay otra forma de hacer mas dinamica xDD.
26 mayo 2010 at 14:14 | arts
Tenía otra preguntilla, esta ya es mas general, respecto a los 3 tipos de formas que hay de poner el css hay una que es en archivos individuales solo de css para despues hacerle un link a la página en cuestión donde afectarán, pero quería saber si esque es mejor, mas optimizada, mas rapida si tiene algún inconveniente, si esta forma es mejor o no.
Espero qcon ansias tus proximos tutoriales, me han gustado muchisimo.
30 mayo 2010 at 15:35 | dmozop
hola dacho,
quería comentarte que me sucede lo mismo que a arts: en el ultimo código por alguna razón que aun no he encontrado el color del background asignado para la sección (#F1F5F8 un azul claro) no cubre por completo la sección. Sino que llega hasta antes de la ultima linea de cuadros (los dos cuadros de toshiba). hice la prueba añadiendole al código mas linea de cuadros (mas computadores) y siempre el color terminan antes de los últimos. me gustaría saber porque esta pasando esto.
PD: la solución que encontré fue colocarle al background del el mismo color que tiene el para que se vea uniforme, aunque esta solución no me parece la mas adecuada.
Otra vez te mando mis agradecimientos por tu colaboración.
Saludos,
30 mayo 2010 at 15:59 | dmozop
dacho,
Al parecer encontré cual es la falla, lo que pasa es que por alguna razon el comando background considera que el layer o div termina en la ultima etiqueta de texto que esta escrito dentro de este que en este caso es el ultimo que es el que nombra a “notebooks toshiba” y hasta ahi pone el color. Otra solución un poco mas elegante que encontré fue colocar despues de los ultimos div de toshiba una etiqueta de parrafo () vacia, y en las instrucciones de css coloque esto: #contenido p{clear: both;}, para hacerle creer al programa que lo ultimo escrito esta por debajo de los div y coloque el color hasta el final.
30 mayo 2010 at 16:13 | dmozop
vuelvo a redactarte los 2 últimos comentarios que salieron incompletos para que entiendan cual es la situación:
1)hola dacho,
quería comentarte que me sucede lo mismo que a arts: en el ultimo código por alguna razón que aun no he encontrado el color del background asignado para la sección <div=”contenido” > (#F1F5F8 un azul claro) no cubre por completo la sección. Sino que llega hasta antes de la ultima linea de cuadros (los dos cuadros de toshiba). hice la prueba añadiendole al código mas linea de cuadros (mas computadores) y siempre el color terminan antes de los últimos cuadros. me gustaría saber porque esta pasando esto.
PD: la solución que encontré fue colocarle al background del<div=”centro” > el mismo color que tiene el <div=”contenido” > para que se vea uniforme, aunque esta solución no me parece la mas adecuada.
Otra vez te mando mis agradecimientos por tu colaboración.
Saludos,
2)dacho,
Al parecer encontré cual es la falla, lo que pasa es que por alguna razon el comando background considera queel layer o div termina en la ultima etiqueta de texto que esta escrito dentro de este, que en este caso es el ultimo <h3 > que es el que nombra a “notebooks toshiba” y hasta ahi pone el color. Otra solución un poco mas elegante que encontré fue colocar despues de los ultimos div de toshiba una etiqueta de parrafo (<p ></p >) vacia, y en las instrucciones de css coloque esto: #contenido p{clear: both;},para hacerle creer al programa que la ultima etiqueta de texto esta por debajo de los div y coloque el color hasta el final.