Hello. I'm trying to replicate the looking of the website of a friend of mine (tuotracara dot com). I want to help him since that code is a true disaster and I think it's a good exercise to practice HTML/CSS. I have some problems with the layout though: When I try to set up a height wrapper to set the body background the footer background stops working as desired. I don't know how to place the fixed width video with the text container located at the left. Some help will be appreciated. html <!DOCTYPE html><html lang="es"><head><meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" > <link rel="stylesheet" type="text/css" href="screen.css" media="screen,projection,tv" > <title> TUOTRACARA </title> </head><body> <div class="widthWrapper"><div id="top"> <h1> TUOTRACARA<span><!-- image replacement --></span> <small> Caricaturas en directo para eventos </small> </h1> <!-- #top --></div> <div id="intro"> <div class="subSection" id="hola"> <h2>¡Hola!</h2> <p> Somos un equipo de caricaturistas especializados en caricatura rápida para la animación de eventos. </p><p> El regalo más original y divertido para que los invitados recuerden tu evento con una sonrisa. </p><p> Desplazamientos a toda España. </p> <span> Solicite presupuesto. </span> <!-- .subSection --></div> <div class="subSection" id="video"> <video controls preload="metadata" poster="images/video.jpg" class="fullVideoPlate" > <source src="videos/test1.mpg" type="video/mp4"> <!-- Don't forget your other "required" source formats I'd probably also have a flash fallback here as well as a flash off fallback text. --> </video> <!-- .subSection --></div> <!-- #intro --></div> <div class="contentWrapper"><div id="content"> <div id="products"> <div class="subSection"> <h2> Caricaturas para bodas y celebraciones <small> ¡Divertidas caricaturas en directo! </small> </h2> <p> Bodas, cumpleaños, comuniones, bautizos, despedidas de soltero y todo tipo de celebraciones ya han contado con nuestros servicios por toda España. </p> <p> Tuotracara te ofrece dar una pincelada de humor a la celebración con divertidas caricaturas en directo para los invitados. </p> <p> Las caricaturas proporcionan un ambiente distendido y divertido, los invitados disfrutarán y se reirán alrededor de los dibujos, además de llevarse un recuerdo personalizado. </p> <p> Podrá disfrutar de nuestras caricaturas en el momento que más le interese. Cada caricaturista dibuja una media de 12-14 caricaturas por hora. </p> <!-- .subSection --></div> <div class="subSection"> <h2> Caricaturas para eventos corporativos </h2> <p> Caricaturas en directo para eventos corporativos, deportivos, convenciones, ferias, y todo tipo de evento de empresa. </p><p> ¡La caricatura es una forma promocional original y divertida! Su poder publicitario radica en que atrae a todos los públicos y que perdura en el tiempo. </p><p> Incluimos en cada papel vuestro logo o slogan impresos para que sea 3 en 1: animación + regalo + PUBLICIDAD. </p><p> Nuestros caricaturistas son especialistas en caricatura rápida tardando aproximadamente 3-4 minutos en en blanco y negro, y 5-6 minutos en color (por persona). </p><p> También dibujamos caricaturas digitales en tablet. Sesión de caricaturas en iPad y caricaturas en Samsung Galaxy Note para todo tipo de eventos (con envío digital / impresora portátil + proyección en pantalla). </p> <!-- .subSection --></div> <!-- #products --></div> <!-- #content, .contentWrapper --></div></div> <div id="extras"> <h2> Caricaturas en directo </h2> <ul> <li> Eventos de Navidad </li><li> Jubilación con Humor </li><li> Comuniones y Bautizos </li><li> Eventos de Promoción </li><li> Aperturas e Inauguraciones </li><li> Ferias </li><li> Congresos y Convenciones </li><li> Deportivos y Culturales </li><li> Viajes e Incentivos </li><li> Fiestas Particulares </li><li> Cócteles </li><li> Talleres Infantiles </li> </ul> <h2> Caricaturas en digital </h2> <p> Divertidas caricaturas en directo sobre tablet y enviadas en el momento en formato digital por e-mail. Con posibilidad de proyección en pantalla e impresora portátil. </p> <ul> <li> iPad caricaturas </li><li> Samsung Galaxy Note caricaturas </li><li> Microsoft Surface caricaturas </li><li> Wacom caricaturas </li> </ul> <span> Nos desplazamos a toda España. </span> <!-- #extras --></div> <div id="gallery"> <h2> Nuestros caricaturistas en acción </h2> <ul> <li> # </li><li> # </li><li> # </li><li> # </li><li> # </li><li> # </li> </ul> <!-- #gallery --></div> <div id="customers"> <h2> Hemos trabajado para </h2> <ul> <li> # </li><li> # </li><li> # </li><li> # </li><li> # </li><li> # </li> </ul> <!-- #customers, .widthWrapper --></div></div> <div id="footer"> <div class="widthWrapper"> <div class="subSection"> <span> foonet.com.<br> Tel: 000000000<br> Email hola@foonet.com </span> <span> © Tuotracara 2016 - <a href="#">Aviso legal</a> </span> <!-- .subSection --></div> <div class="subSection"> <h2>Asociaciones de dibujantes</h2> <ul> <li> <a href="#"> ISCA </a> </li><li> <a href="#"> ACE </a> </li> </ul> <!-- .subSection --></div> <div class="subSection"> <h2>Con la colaboración de</h2> <ul> <li> <a href="#"> bodas.net </a> </li> </ul> <!-- .subSection --></div> <!-- .widthWrapper --></div> <!-- #footer --></div> </body></html> Code (markup): css /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } hr { display:none; /* HR in my code are for semantic breaks in topic/section, NOT style/presenation, so hide them from screen.css users */ } @media (max-width:480px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } body { font:normal 85%/150% "segoe ui",helvetica,sans-serif; /* background-image:url('images/background.jpg'); */ } p { margin-bottom:1em; } h2 { margin-bottom:1em; } #top, #footer, .widthWrapper { min-width:48em; } .widthWrapper { overflow:hidden; /* wrap floats */ zoom:1; /* trip haslayout, wrap floats legacy IE */ max-width:60em; margin:0 auto; } #top { overflow:hidden; /* wrap floats */ width:100%; /* wrap floats legacy IE, report width to .colorBar */ } h1 { float:left; } .contentWrapper { width:100%; float:left; } .heightWrapper { background:#ddd; } #content { position:relative; zoom:1; /* report width legacy IE */ margin-right:16em; /* must == #extras width */ padding-top:1em; } #extras { float:left; width:16em; margin-left:-16em; /* must == negative #extras width */ padding-top:1em; } #footer { background:#000; color:#fff; } #gallery, #customers { clear:both; } #gallery ul, #customers ul { list-style:none; text-align:center; padding-bottom:1em; } #gallery li, #customers li { display:inline; vertical-align:top; } #gallery a, #customers a { display:inline-block; vertical-align:top; } #footer a { color:#fff; } #footer .subSection { float:left; width:33.33%; } #content .subSection { float:left; width:49%; } #intro .subSection { float:left; } #hola { width:30em; } Code (markup): Please, sorry again for the bad formatting, when I copy from Flo's Notepad++ to this editor the tabs break.
I really don't understand what you are trying to do. If you can explain me better i may be able to help you