CSS wrapping text with overflow hidden div not working?

Question

In my css,i write a class style overflow : hidden.My div contains a small image and some paragraph text. if the overflow is hidden in the sense the word wrap doesn't work. if i remove,it works. but i need both overflow hidden and also word wrap.

.img-block_100 { height: 100px; width: 100px; float: left; margin-right: 5px; } .img-block_100 img { max-width: 100%; } .ee-content { width: 100%; height: 140px; overflow: hidden; width: 250px; }

please see what i tried: Demo

If I remove overflow:hidden; the full text becomes visible, as would be expected. — APAD1
– APAD1, Commented Mar 17, 2015 at 14:29

Josh Crozier · Accepted Answer · 2015-03-17 14:30:53Z

It's because overflow: hidden was clearing the floated img element.

One solution would be to wrap both of the elements and then add overflow: hidden to the wrapper. In doing so, the floated img isn't being cleared, and the text wraps around the img as expected.

Example Here

.content-wrapper { width: 250px; height: 140px; overflow: hidden; }

Collectives™ on Stack Overflow

CSS wrapping text with overflow hidden div not working?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related