Maquetación de una web: La propiedad float de CSS

Sobre este artículo

Licencia: Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia.

URL: LaWebera.es :: Diseño Web

Diseñador web y gráfico afincado en Uruguay. Ha trabajado como freelance para empresas de toda Latinoamérica y España. Apasionado del diseño y autodidacta por naturaleza, gran parte de lo que sabe lo ha aprendido de sitios como este.

También te podría gustar...

10 Respuestas

  1. fernando

    Muy buen tutorial. Sinceramente lo mejor que he visto por ahi. Gracias por enseñar

  2. Antonio

    He quedado encantado con la forma de enseñar la “maquetación de una web”, verdaderamente clara y sencilla. Gracias.

  3. Sandra

    Verónica, sería interesante que habilitaras el poder poner código HTML en los comentarios, pues al ser un sitio web de diseño web muchas veces se necesita poder poner ejemplos como era ahora el caso..

    Ana, si tienes alguna duda con el HTML, dímelo y te envío el código.

    • Verónica Milán

      Tienes toda la razón, pero no es tan fácil porque permitir insertar código en los comentarios puede generar vulnerabilidades que es mucho mejor evitar. Estamos trabajando en ofrecer esta opción, esperemos que pronto esté disponible.

      Gracias por el aporte!

  4. Sandra

    Se ha borrado el código HTML al subirlo, a ver si usando ahora se visualiza, en otro caso Ana me puedes contactar y te lo envío.

    HTML:

  5. Sandra

    Contesto a Ana. Lo primero Ana, es que no se debe usar divs para simular tablas, al igual que no se deben usar tablas para hacer lo que hacen los divs. Para el tipo de estructura que planteas no está aconsejado el uso de divs. Igualmente, he creado el código por si lo quieres implementar en divs. Seguramente hay alguna manera más limpia de hacerlo, pero como ejemplo sirve:

    HTML:

    CSS (pongo los bordes de colores diferentes por si quieres copiar el código y comprobar que funciona)

    .fila {
    width:800px;
    height:200px;
    border:1px solid red;
    }

    .izquierda, .centro, .derecha {
    float:left;
    width:195px;
    height:200px;
    border:1px solid blue;
    }

    #izquierda_lt {
    position:absolute;
    width:80px;
    height:80px;
    border:1px solid green;
    }

    #izquierda_rt {
    position:absolute;
    margin-left:80px; /*igual o mayor que el width the #izquierda_lt */
    width:80px;
    height:80px;
    border:1px solid yellow;
    }

  6. asfa

    Posicionamiento relativo – Se maneja en relacion a su posicion normal y no a la del contenedor.

  7. Ana

    Hola de nuevo, Verónica. A ver si tú eres mi salvación porque ya me estoy volviendo “majara”….
    Intento hacer -para abreviar- lo que en tablas sería una fila con 3 celdas/columnas, más debajo una única gran fila/celda. Lo digo en tablas para ser más ilustrativa. Me empeño en hacer lo mismo en div’s (uno arriba q equivaldría a la primera fila de esa hipotética tabla) y otro debajo. Y todo ello a la derecha de otro div que sería la barra de navegación.
    Pues bien, logro crearlos y que más o menos funcionen ambos. El problema está en el de arriba donde, a su vez, “coloco” otros dos div’s (uno en la primera “celda” y otro en la tercera) aunque repito que no se trata de una tabla… Y hacen lo que quieren! no consigo alinearlos, la imagen de la tercera parte se va arriba o abajo… Pruebo con la opción posición, que creía que “relativa” se refería a relativa al contenedor… En fín, un desmadre.
    Algún consejito?… Mil gracias.

Deja un comentario

El email no se publica. Todos los campos obligatorios.