Ver Mensaje Individual
  #2 (permalink)  
Antiguo 22/10/2012, 11:08
Avatar de tutorias
tutorias
 
Fecha de Ingreso: octubre-2012
Ubicación: Medellin
Mensajes: 69
Antigüedad: 12 años, 1 mes
Puntos: 13
De acuerdo Respuesta: Problema Maquetacion

Un saludo. Te recomiendo entrar al estándar html5. En cuanto a CSS, debes utilizar las propiedad "display: inline-block;" para que el bloque no ocupe toda la linea.

Su maqueta:
Código HTML:
<!DOCTYPE html>
<html lang="es-CO">
<head>
  <meta charset="UTF-8">
  <title>tutorias.co</title>
  <style type="text/css">
    header{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
      position      : relative;
      vertical-align: top;
    }
    section{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
      position      : relative;
      vertical-align: top;
    }
    article, aside{
      border        : 1px solid #ccc;
      display       : inline-block;
      min-width     : 75%;
      padding       : .5em;
      vertical-align: top;
    }
    ul li{
      display:inline-block;
    }
    footer{
      border        : 1px solid #ccc;
      margin        : 0 auto;
      max-width     : 1000px;
    }
    .contentHeader{
      border        : 1px solid #ccc;
      display       : inline-block;
      max-width     : 60%;
      padding       : .5em;
      vertical-align: top;
    }
    .cajaImagenes{
      border   : 1px solid #ccc;
      margin   : 0 auto;
      max-width: 1000px;
    }
  </style>
</head>
<body>
  <header>
      <div class="contentHeader" style="width:10%"><img src="logo.jpg" alt="logo" /></div>
      <div class="contentHeader">
        <nav>
          <ul>
              <li><a href="">Noticias</a></li>
              <li><a href="">Categorias</a></li>
          </ul>
        </nav>
      </div>
  </header>
  <div class="cajaImagenes">
      <img src="img1.jpg" alt="img1" /><img src="img2.jpg" alt="img2" /><img src="img3.jpg" alt="img3" />
  </div>
  <section>
    <article>
       contenido
    </article>
    <aside style="min-width:21%">
       barra derecha
    </aside>
  </section>
  <footer>
       Pie
  </footer>
</body>
</html>