soy Kseso y esto EsCSS

Anchuras mínimas en párrafos en diseños fluídos

Anchuras mínimas en párrafos en diseños fluídos

·Por Kseso ✎ 0

Créditos: Artículo original de Gustav Andersson publicado en css.tricks

El problema

Mira la imagen de la izquierda para identificar el problema: en un diseño fluido, una imagen flotada y un texto. Llega el momento en que una palabra es lo suficientemente larga como para no tener sitio junto a la imagen y dar el salto todo el texto restante hasta colocarse por debajo de la imagen. Feo, antiestético y dificulta la lectura.

La primera intención sería dar una anchura mínima al párrafo, cosa que no arregla la situación. El flotado no disminuye la anchura computada para el párrafo, aunque sí la disponible para colocar el texto.
(De mi cosecha ajeno al artículo original: un tamaño en % al elemento flotado tampoco, al font-size no le atañe, y quizás el elemento pierda su valor a determinado tamaño o te encuentres situaciones no deseables.)

Dos soluciones Dos

Media Queries

Si la imagen o cualquier elemento flotado tiene una anchura fija a la hora de realizar el css, algo tan simple como utilizar las @media queries para anular el flotado en determinado tamaño:

@media screen and (max-width: 400px) { img { float: none;} }

La Contra: Hay navegadores que no soportan las @media queries.

Solución universal con pseudoelemento

En el caso de desconocer el tamaño del elemento flotado podrían darse situaciones poco elegantes. Una solucción mejor es utilizar el pseudoelemento :before y que no sea visible. Asignándole una anchura suficiente, en caso de no tener espacio para él se colocará bajo (eje Y) la imagen y forzará al texto a posicionarse tras él.

p:before { content: ""; width: 10em; display: block; overflow: hidden; /* Para la demostración */ border: 1px solid green; }

Prácticamente es soportado por todos los navegadores, y en caso de encontrarte con alguno que no, símplemente estaremos en la situación original de partida.

Ejemplos en vivo de las situaciones

Párrafo con anchura mínima

El declarar un min-width no es solución cuando hay elementos flotados.

El problema

Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.

Media Queries

Anulando el float para anchuras mínimas. Redimensiona la ventana < 400px

Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.

PseduoElemento

El pseduo elemento en verde (visible para el ejemplo).

Hay que ver y garantizar que los párrafos puede manejar el espacio limitado dejado por las imágenes flotantes.

Créditos: Artículo original de Gustav Andersson publicado en css.tricks

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso