16.3. Solución ejercicio 3 3w592l

/* === IMPORTANTE ===
No modificar estos estilos, ya que son imprescindibles para
que la página se vea correctamente.
Sin embargo necesitas la otra parte del CSS. que esta en la siguiente url:
https://tutorialesenlinea.descargarjuegos.org/cursos/Introduccion_a_CSS/static/libros/ejercicios/css/ejercicio3/BlogPostAssets/styles/blogPostStyle.css
Copiar y pegar... :)
   ================= */

/*-- 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 ----------------------------------------------------------*/
#mainwrapper {
  width: 90%;
  max-width: 900px;
  width: expression(document.body.clientWidth > 901? "900px": "auto");
  margin: 0 auto;
}

#header, #menu, #lateral, #contenido, #contenido #principal, #contenido #secundario, #footerbar {
  border: 2px solid #777;
}

#header { 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%; }
#footerbar { clear: both; }

/*-- header --------------------------------------------------------*/
#header #logo { float: left; }
#header #buscador { float: right; }

/*-- Menu ------------------------------------------------------------*/
#menu ul#menu_principal li { display: inline; float: left; }

/*-- Sección Principal -----------------------------------------------*/
#contenido #principal .articulo img { width: 100px; float: left; }

/*-- footer de página ---------------------------------------------------*/
#footerbar .enlaces   { float: left; }
#footerbar .copyright { float: right; }

/* === IMPORTANTE ===
   A partir de aquí, se pueden añadir todos los estilos propios que
   sean necesarios.
   ================= */


#header,
#menu,
#lateral,
#lateral #sidebar,
#lateral #publicidad,
#contenido,
#contenido #principal,
#contenido #secundario,
#footerbar {
  padding: .5em;
}

#lateral {
  padding: 0;
}

#header {
  padding: 1em;
}

#menu {
  margin-bottom: .5em;
}

#contenido {
  width: 77%;
  padding: 0;
}

#contenido #principal {
  width: 73%;
}

#footerbar {
  padding: .5em 0;
  margin-top: 1em;
}

#contenido #principal .articulo {
  margin-bottom: 1em;
}

#contenido #principal .articulo img {
  margin: .5em;
}

#lateral #publicidad {
  margin-top: 1em;
}