Question

Pretty simple set-up here, I’m just trying to get two divs to sit side-by-side. Image on the left, text on the right. For some reason, if the text is too long, it pushes the div down. I’d like to just make the cs-summary div understand that it should wrap the text in order to NOT jump down like it is:

http://jsfiddle.net/csaltyj/5Huau/

Code:

<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>
    </div>
</div>
<div class="container">
    <div class="cs-image">
        <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    </div>
    <div class="cs-summary">
        <p>Super short text behaves.</p>
    </div>
</div>

CSS:

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.cs-image {
    float: left;
    border: 2px solid red;
}

.cs-summary {
    font-size: 0.8em;
    border: 2px solid blue;
    float: left;
    margin-left: 1em;
}

As you can see from the second container below, the short text works just fine. I don’t want to hardcode any pixel or em values for how wide the text is, I just want it to conform and “know” its bounds.

Thanks in advance.

Answer 1

If your div.cs-summary doesn’t have a set width it will take up as much space as it can

http://jsfiddle.net/hunter/5Huau/7/

.cs-summary {
    width: 180px;
    ...
}

---

or you could remove the wrapping inner div elements and just do this:

http://jsfiddle.net/hunter/5Huau/11/

HTML

<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />   
    <p>Texty text text McTexterson likes to text. Why is div getting shoved down?</p>        
</div>
<div class="container">
    <img src="http://www.electroniccampus.org/school_logos/CFNC/Wake_Forest_University/Wake_Forest_University2.jpg" />
    <p>Super short text behaves.</p>
</div>

CSS

.container {
    overflow: hidden;
    border: 2px solid #0f0;
    width: 400px;
    margin-bottom: 1em;
}

.container img {
    float: left;
    border: 2px solid red;
}

.container p {
    font-size: 0.8em;
    border: 2px solid blue;
    margin-left: 1em;
}