CSS / html

html desde cero CSS padding & margin Viewport Color Git & github Practicar Listas & Tablas DOM Navbar Responsividad Dropdowns Float Layout Flex Layout Fuentes Inspector Grid Layout Fixed Items Iconos Animaciones Box shadow y Text shadow

CSS / html

  1. HTML desde cero
    2.
  2. CSS
    3.
  3. Padding & margin
    4.
  4. Viewport
    5.
  5. Color
    6.
  6. Git & github
    7.
  7. Practicar
    8.
  8. Listas & Tablas
    9.
  9. DOM
    10.
  10. Navbar
    11.
  11. Responsividad
    12.
  12. Dropdowns
    13.
  13. Float Layout
    14.
  14. Flex Layout
    15.
  15. Fuentes
    16.
  16. Inspector
    17.
  17. Grid Layout
    18.
  18. Fixed Items
    19.
  19. Iconos
    20.
  20. Animaciones
    21.
  21. Box & Text Shadow
    22.

Float layout

view_quilt

Como hacer float layout en CSS view_quilt

Bueno ahora vamos a ver una de varias alternativas para maquetacion(layout) en html. Al asignar float a la propiedad display de un item dentro de un contnedor, estamos estableciendo en que lado se va a desplegar dicho item. Para este ejemplo voy a usar el caso donde tenemos un side menu y con float lo desplegamos en un lado u otro.

Como en otros capitulos, puedes encontrar los fragmentos de codigo que use para este ejemplo.

Para usar float primero hay que establecer display:table en el contenedor padre. Luego para los items dentro del contenedor usamos la propiedad float: y tenemos varias opciones (MDN docs):

valor definicion
left el item "flota" a la izquierda
right el item "flota" a la derecha
none el item no flota, determinado
inline-start el item "flota" al inicio de su contenedor
inline-end el item "flota hacia el lado final de su contenedor
/* contenedor padre */
.container {
  display: table;
}

/* item */
.section{
float:right | left | none | inline-start | inline-end;
}

Para agendar una entrevista puedes contactarme por estos medios

Boston, Massachusetts
sinoplecarballo@gmail.com
Martin Carballo
@shur_d_firsiel