CODEWITHSUNDEEP
htmlcss
Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Paragraph tag causing parent to increase width

I've got a basic layout that is a div with a thumbnail, floated left, then a div with some text in it (title, description, links) that floats lefts as well. They're meant to be side-by-side but as soon as the browser is too narrow, it pushes the 2nd div below the first, rather than just decreasing its width.

I can't believe I'm stumped on this as it seems really simple. I'd really appreciate some 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 a race created to practise a motorbike stunt in GTA V where you can jump from the docks to near the airport.  Race is 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 to Cheddar for the 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;
}
a {
    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 example of the above

http://jsfiddle.net/yp7f0nz1/

Upvotes: 0

Views: 66

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

All that is required is to not float the info div and (based on other comments) add adequate padding=left so that the text does not wrap around the thumbnail.

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

Jsfiddle Demo

EDIT

I was reminded that a table would do this automatically and. of course, we have display:table / table-cell open to us.

Removing the floats and 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

Upvotes: 2

Related Questions