html - Paragraph tag causing parent to increase width -

html - Paragraph tag causing parent to increase width -

i've got basic layout div thumbnail, floated left, div text in (title, description, links) floats lefts well. they're meant side-by-side browser narrow, pushes 2nd div below first, rather decreasing width.

i can't believe i'm stumped on seems simple. i'd appreciate help!

html

<div class="stunting-video odd"> <div class="thumbnail"> <img src="https://i.ytimg.com/vi/lixkwlqisgu/mqdefault.jpg" data-video-id="lixkwlqisgu" class="show-video" alt="stunting video"> </div> <div class="info"> <p class="title">gta v - stunt practise 03</p> <p class="description">a play-through of race created practise motorbike stunt in gta v can jump docks near airport. race available here...<br> <br> <span class="highlight">ps3:</span> <a href="http://rsg.ms/0330f82">http://rsg.ms/0330f82</a><br> <span class="highlight">xbox360:</span> <a href="http://rsg.ms/4464ca5">http://rsg.ms/4464ca5</a><br> <br> special credits cheddar 360 version.</p> </div> </div>

css

body { background-color: rgb(20, 20, 20); color: rgb(238, 238, 221); font-family: sans-serif; font-size: 16px; font-weight: 300; margin: 20px; } { color: rgb(111, 178, 244); } .stunting-video { background-color: rgba(255, 255, 255, 0.125); border-radius: 30px; box-shadow: 5px 5px 10px rgba(255, 255, 255, 0.3) inset, -5px -5px 10px rgba(0, 0, 0, 0.9) inset; clear: both; margin: 10px 0; overflow: auto; padding: 5px 15px 15px; } .stunting-video .thumbnail { border: 0; cursor: pointer; float: left; margin: 10px 20px 0 0; padding: 0; } .stunting-video .thumbnail img { border-radius: 15px 0 0 15px; } .stunting-video .info { float: left; } .stunting-video .title { color: rgb(245, 215, 122); font-size: 150%; font-weight: bold; } .stunting-video p { margin: 5px 0; }

js fiddle illustration of above

http://jsfiddle.net/yp7f0nz1/

all required not float info div , (based on other comments) add together adequate padding=left text not wrap around thumbnail.

.stunting-video .info { padding-left: 350px;; }

jsfiddle demo

edit

i reminded table automatically and. of course, have display:table / table-cell open us.

removing floats , using

.stunting-video { display: table; }

and

.stunting-video .thumbnail { display: table-cell; vertical-align: top; } .stunting-video .info { display: table-cell; vertical-align: top; }

jsfiddle demo 2

html css