English Português

No trabajar con tablas en la estructuración de una web es un paso importante cuando se quiere


<div id="contenedor">

<div id="lateral">
<p>Aquí ira el contenido alineado a la izquierda</p>
</div>

<div id="principal">
<p>Aquí ira el contenido principal a lado del contenido o menú lateral</p>
</div>

</div>

Como viste existen 3 etiquetas que serviran para:

  • Contenedor – Determina el espacio de trabajo total.
  • Lateral – Ancho del lateral y su ubicación.
  • Principal – Ancho del contenido.

La propiedades que debén tener son:


#contenedor{
text-align: left;
width: 750px;
margin: auto;}

#lateral{
width: 180px;  /*Este será el ancho que tendrá tu columna*/
background-color: #CCCCCC;  /*Aquí pon el color del fondo que quieras para este lateral*/
float:left; /*Aqui determinas de lado quieres quede esta "columna" */
}

#principal{
margin-left:190px; /*Este margen hace que no se encime el contenido en tu menúlateral, es     importante que pongas un pocos pixeles más que el ancho  de tu columna lateral*/
background-color: #FFFFFF;
border:#000000 1px solid; /*ponemos un dorde para que se vea bonito*/
}
Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. halı yıkama / Hace 9 años /

      thanks

      Responder a halı yıkama →
    2. pablo / Hace 9 años /

      lo haces ver tan simple. Que uno no deberia evitar el agradecerte

      Responder a pablo →
    3. halı yıkama / Hace 9 años /

      thanks Very god

      Responder a halı yıkama →
    4. halı yıkamacı / Hace 9 años /

      thanks

      Responder a halı yıkamacı →
    5. halı yıkama / Hace 9 años /

      saolasın kardaş

      Responder a halı yıkama →
    6. Helthon / Hace 8 años /

      Perfecto sirvio de gran ayuda

      Responder a Helthon →
    7. Jesus Rueda / Hace 8 años /

      Es incrieble que con codigo o en este caso estilos y layout basicos se puedan hacer cosas sorprendentes, con un poco de creatividad y empeño se arma a toa´ con la web que uno desee crear

      Responder a Jesus Rueda →
    8. Jesus Rueda / Hace 8 años /

      Y gracias por el Aporte me saco de algunas dudas

      Responder a Jesus Rueda →
    9. leandro / Hace 8 años /

      Fo que facil!!! gracias ahora lo voy a probar! gracias gracias

      Responder a leandro →
    10. Nestor / Hace 8 años /

      excelente con este ejemplo ya concrete

      Responder a Nestor →
    11. mıknatıs / Hace 7 años /

      Perfecto sirvio de gran ayuda

      Responder a mıknatıs →
    12. Tato / Hace 6 años /

      Muchas gracias por la ayuda me sera muy util.

      Responder a Tato →
    13. Charlie / Hace 6 años /

      Excelente es lo que buscaba y bien claro. Gracias

      Responder a Charlie →
    14. Francisca / Hace 5 años /

      Está todo perfecto, pero para que el contenido de los dos ID estuvieran alineados arriba tuve que agregar al css “principal” “position:absolute”
      Gracias!!!

      Responder a Francisca →
    15. alberto / Hace 4 años /

      Muchas gracias.

      Responder a alberto →
    16. Jorge / Hace 4 años /

      Hola. Gracias por tu post que es de mucha ayuda.

      Quiero hacerte una consulta si es posible.
      Necesito hacer una página en la que haya dos columnas una principal de 600px y otra a la derecha de 200px. Hasta ahí todo sin problemas. El problema es que quiero que la columna de la derecha (la de 200px) cuando no tenga ningún contenido, cuando esté vacía, esté oculta y que la columna principal, la de 600px, ocupe el espacio que ocupaba la columna derecha, o sea que pasaría a tener 800px.

      ¿Es posible hacer eso con CSS?

      Responder a Jorge →
    17. Seyer / Hace 3 años /

      Gracias, responde directo a la pregunta del cómo..

      Responder a Seyer →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad