Minimum Widths for the text container in Fluid Layouts

Minimum width for the text that flows around a floating element.

A floating element takes space from the horizontal space from the text that flows around it. If browser view port is small the horizontal space left for the text may only fit a word or two per line resulting in a ugly narrow column.

241559_408204619244716_1660507095_o

The problem: when browser width is 320px the space left the floating text is small and the text looks ugly.

The fix for columns too small to contain text is to use the pseudo element :before  on the container that contains the floating text.

241559_408204619244716_1660507095_o

The problem: when browser width is 320px the space left for the floating text is small and the text looks ugly but now the text will just show up under the image

If the browser width is greater, ex. 450px the text will float next to the image because the minimum width we set in the css is met

241559_408204619244716_1660507095_o

The problem: when browser width is 450px the space left for the floating text is small and the text looks ugly but now the text will just show up under the image

Leave a Reply

Your email address will not be published. Required fields are marked *