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.
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.
.floating-text-container {
border-top: 1px solid transparent;/*fix for Mozilla Firefox*/
}
.floating-text-container:before {
content: "";
width: 100px;/*min width required for the floating text container */
display: block;
overflow: hidden;
}
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
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