Delete Me Delete Me - 24 days ago 10
CSS Question

Div not spreading to the height of a floating image

I try to have a div spread to the height of the image it contains. Since the image has a float:left style, the div does not spread. Is there a workaround?

Here is my css code:

.Small-im {float:left;height:auto; width:100px; border: solid 1px #F00;}
.click {border: solid 1px #000; height:100%;}


Here is my html:

<div class="click"><img class="Small-im" src="http://www.MenuSvp.com/i/2/p/b01.jpg" onerror="imgError(this)" />du testssdw re sad sda asfd sfda asd asdf sdf sadf sadf sfda asdf asdff gh ru er6y reu eu uy er tre er t rt</div>


JSFiddle

Thanks for your help.

Answer

Add overflow:auto to the container (.click) to adjust it's size according to the floated inner content :

.click {border: solid 1px #000; overflow:auto}

JSFiddle

Comments