El ejercicio 3 del tutorial introduccion a CSS funciona bien en Internet Explorer y FireFox , no así en Chrome; en este último aparece y desaparece la caja con id publicidad. El HTML es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="ejercicio3.css" title="style" /> <title>Lorem ipsum</title> </head> <body> <!-- Contenedor --> <div id="contenedor"> <!-- Cabecera --> <div id="cabecera"> <div id="logo"> <h1><span>LOGOTIPO</span></h1> </div> <div id="buscador"> <form action="#" method="post"> Buscar <input name="busqueda" type="text" /> </form> </div> <div class="clear"></div> </div> <!-- /Cabecera --> <!-- Menu principal --> <div id="menu"> <ul id="menu_principal"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Sit</a></li> <li><a href="#">Amet</a></li> </ul> <div class="clear"></div> </div> <!-- Lateral --> <div id="lateral"> <!-- Noticias --> <div id="noticias"> <h3><a href="#">Noticias</a></h3> <p><span class="fecha">dd/mm/aaaa</span> <a href="#">Lorem ipsum dolor sit amet</a></p> <p><span class="fecha">dd/mm/aaaa</span> <a href="#">Consectetuer adipiscing elit</a></p> <p><span class="fecha">dd/mm/aaaa</span> <a href="#">Donec molestie nunc eu sapien</a></p> <p><span class="fecha">dd/mm/aaaa</span> <a href="#">Maecenas aliquam dolor eget metus</a></p> <p><span class="fecha">dd/mm/aaaa</span> <a href="#">Fusce tristique lorem id metus</a></p> <h3><a href="#">Enlaces relacionados</a></h3> <ul> <li><a href="#">Proin placerat</a></li> <li><a href="#">Nulla in felis</a></li> <li><a href="#">Nam luctus</a></li> </ul> </div> <!-- /Noticias --> <!-- Publicidad --> <div id="publicidad"> <h3><a href="#">Publicidad</a></h3> <p>Etiam fermentum, nisl tincidunt blandit interdum, massa velit posuere dolor, sed euismod sem odio at mi.</p> <p>Duis porta placerat arcu. Nullam felis pede, commodo vel, suscipit a, molestie vel, felis. Maecenas mattis est vel est.</p> <p><a href="#">Seguir leyendo...</a></p> </div> <!-- /Publicidad --> </div> <!-- /Lateral --> <div id="contenido"> <!-- Principal --> <div id="principal"> <div class="articulo"> <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2> <img src="imagenes/imagen.png" alt="Imagen genérica" /> <p>Nullam est lacus, suscipit ut, dapibus quis, condimentum ac, risus. Vivamus vestibulum, ipsum sollicitudin faucibus pharetra, dolor metus fringilla dui, vel aliquet pede diam tempor tortor.</p> <p>Vestibulum pulvinar urna et quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam vel turpis vitae dui imperdiet laoreet. Quisque eget ipsum.</p> <p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p> <p><a href="#">Seguir leyendo...</a></p> </div> <div class="articulo"> <h2>Vivamus lobortis turpis ac ante fringilla faucibus</h2> <img src="imagenes/imagen.png" alt="Imagen genérica" /> <p>Quisque eget ipsum. Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dictum hendrerit neque. Mauris id ligula non elit mattis semper. Fusce arcu ipsum, tempus eget, tincidunt at, imperdiet in, mi.</p> <p>Sed fermentum cursus dolor. Aenean a diam. Phasellus feugiat. Donec tempor dignissim sem.</p> <p><a href="#">Seguir leyendo...</a></p> </div> </div> <!-- /Principal --> <!-- Secundario --> <div id="secundario"> <h2>Phasellus blandit</h2> <p>Praesent sodales imperdiet augue. Mauris lorem felis, semper eu, tincidunt eu, sollicitudin eget, sem. Nulla facilisi. Morbi ut enim ut enim ultricies dapibus.</p> <p><a href="#">Seguir leyendo...</a></p> <h2>Nullam vel turpis</h2> <p>Donec commodo, turpis vel venenatis sollicitudin, quam ante convallis justo, sed eleifend justo lectus quis sapien. Ut consequat libero eget est.</p> <p><a href="#">Seguir leyendo...</a></p> </div> <!-- /Secundario --> </div> <!-- /Contenido --> <div class="clear"></div> <!-- Pie --> <div id="pie"> <span class="enlaces"> <a href="#">Nulla</a> | <a href="#">Pharetra</a> | <a href="#">Luctus</a> | <a href="#">Ipsum</a> | <a href="#">Proin</a> | <a href="#">Placerat</a> </span> <span class="copyright"> © Copyright Lorem ipsum </span> <div class="clear"></div> </div> <!-- /Pie --> </div> <!-- /Contenedor --> </body> </html>
El CSS es:
/* === IMPORTANTE === No modificar estos estilos, ya que son imprescindibles para que la página se vea correctamente. ================= */ /*-- Básico ----------------------------------------------------------*/ ul, ul li { margin: 0; padding: 0; list-style: none; } h1, h2, h3, p, form { margin: 0; padding: 0; } .clear { clear: both; } img { border: none; } /*-- Layout ----------------------------------------------------------*/ #contenedor { width: 90%; max-width: 900px; width: expression(document.body.clientWidth > 901? "900px": "auto"); margin: 0 auto; } #cabecera, #menu, #lateral, #contenido, #contenido #principal, #contenido #secundario, #pie { border: 2px solid #777; } #cabecera { clear: both; } #menu { clear: both; } #lateral { float: left; width: 20%; } #contenido { float: right; width: 78%; } #contenido #principal { float: left; width: 78%; } #contenido #secundario { float: right; width: 20%; } #pie { clear: both; } /*-- Cabecera --------------------------------------------------------*/ #cabecera #logo { float: left; } #cabecera #buscador { float: right; } /*-- Menu ------------------------------------------------------------*/ #menu ul#menu_principal li { display: inline; float: left; } /*-- Sección Principal -----------------------------------------------*/ #contenido #principal .articulo img { width: 100px; float: left; } /*-- Pie de página ---------------------------------------------------*/ #pie .enlaces { float: left; } #pie .copyright { float: right; } /* === IMPORTANTE === A partir de aquí, se pueden añadir todos los estilos propios que sean necesarios. ================= */ #cabecera, #menu, #lateral, #lateral #noticias, #lateral #publicidad, #contenido, #contenido #principal, #contenido #secundario, #pie { padding: .5em; } #lateral { padding: 0; overflow: hidden; } #cabecera { padding: 1em; } #menu { margin-bottom: .5em; } #contenido { width: 77%; padding: 0; } #contenido #principal { width: 73%; } #pie { padding: .5em 0; margin-top: 1em; } #contenido #principal .articulo { margin-bottom: 1em; } #contenido #principal .articulo img { margin: .5em; } /* Estas líneas las agregue para tratar de solucionar el problema pero no funcionaron */ #lateral #noticias{ margin-bottom:0.5em; font-size:10px; height:50%; } Saludos desde México #lateral #publicidad{ border:1px solid #777; height:50%; }