html - text gets longer when zoomed out -

html - text gets longer when zoomed out -

i have div in there image , text working fine when zoomed out text gets longer , jumps out of div using overflow-x:hidden; hide why happen? code http://jsfiddle.net/z19n1jjg/

<div id="test"><img src="http://placekitten.com/300/301"/> <p>content</p> </div>

css

#test{ border:1px solid black; width:300px; height:320px; overflow-x:auto; } #test img{ float:left; width:150px; height:150px; }

you using pixels. alter on different display sizes.

if want code relatively, utilize em's instead of pixels.

view updated fiddle: http://jsfiddle.net/z19n1jjg/1/

#test{ border:1px solid black; width:18em; height:22em; padding:1em; } #test img{ float:left; width:5em; height:5em; margin:0 .5em 0 .5em; }

is looking for?

html css