Columnas 1

En esta clase hicimos una introducción a la diagramación con CSS.

Contenidos

  • Elementos DIV para estructuración de secciones de contenido
  • Atributo CSS float

Links relacionados

En este artículo explico cómo usar DIVs junto con al atributo float para diagramar columnas.

Clase CSS “Clearfix”, usada para solucionar contenedores que colapsan cuando su contenido son floats. La clase original la encuentran en PositionIsEverything. Explicación en español en CSSLab.

7 comentarios por mucho »

  1. 1

    Mr WordPress escribió,

    Hi, this is a comment.
    To delete a comment, just log in, and view the posts’ comments, there you will have the option to edit or delete them.

  2. 2

    Hola!

    Solo para recordar que el reportaje explicativo completo -en exclusiva- sobre “HTML5 v/s XHTML2″ traducido al español, lo encuentran en http://www.gigabytes.cl
    Lo recomiendo para que estemos todos informados al respecto, estos cambios “afectaran a todos los que estamos en el negocio”.

    PS: Sería bueno cambiar la combinación de colores para el formulario de comentarios… a penas pude ver los campos.

    PS2: Quiero, y necesito aprender a servir documentos XML, que sean desplegados en HTML o XHTML, y enchulados vía CSS.
    Por su atención, y pronta colaboración, muchas gracias.

    J7…. J7… (como en el Jumbo xD).

    Saludos a todos.

  3. 3

    eddie escribió,

    mi pregunta es.. que pasa si hay 4 div, uno de encabezado y otros 3 para el contenido.. en el contenido como pongo uno a la izquierda, otro almedio y otro a la derecha. porque no existe el fload centrado y al ponerle none queda arriva de los otros dos que se le especificaron right y left.

    saludos
    pd: nose si se entendio xD

  4. 5

    ismasan escribió,

    Eddie: si tienes 3 divs, uno al lado del otro y quieres convertilos en 3 columnas, simplemente le pones float:left a cada uno, y el width correspondiente. Por ejemplo, para el siguiente HTML:


    <div id="columna1">

    </div>
    <div id="contenido">

    </div>
    <div id="columna2">

    </div>

    Haríamos el siguiente CSS.


    #columna1,#contenido,#columna2 {
    float:left;
    }
    #columna1,#columna2 {
    width:20%;
    }
    #contenido {
    width:60%;
    }

    En todo caso, hay otras formas de lograr varias columnas, sin usar float. Lo veremos en las próximas clases.

  5. 6

    andres escribió,

    Profe,

    Aca va mi tarea corregida, nos vemos mañana!

    http://www.uniweb.cl/andres.mancilla/css/

  6. 7

    andres escribió,

    profe,

    aca va mi tarea corregida,

    http://www.uniweb.cl/andres.mancilla/css/

    nos vemos mañana!


Comentario RSS · URI para TrackBack.

Diga sus palabras