Div Not Floating When Text Wraps to Second Line? - html

Question

I ran into a floating/alignment issue and can't seem to figure it out. When I float some DIVs next to each other they all line up like they should... until the text from one of the DIVs falls to a second line.
If you look below you can see how Line 1 shows up. As you can see, ABCD sits next to the other DIVs on the same line.
On Line 2 you can see how EFGH falls to another line, even though there's plenty of space for it on the previous line.
How can I make it so the DIVs always sit next to each other regardless of how many lines of text there are?
Any help would be greatly appreciated!
SCREENSHOT
#sample-list {
margin-bottom: 35px;
float: left;
width: 400px;
background: orange;
word-wrap: break-word;
}
.sample-overview {
width: 100%;
float: left;
font-family: "open sans", "arial";
font-size: 12px;
line-height: 14px;
margin-bottom: 20px;
word-wrap: break-word;
}
.sample-name-wrap {
width: 100%;
white-space: normal;
}
.sample-name {
float: left;
}
.sample-dash {
float: left;
margin: 0 5px;
}
.sample-div {
float: left;
background: #ccc;
}
<div id="sample-list">
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
<div class="sample-name">
Line 1: ostrum exercitationem ullam corporis
</div>
<div class="sample-dash">–</div>
<div class="sample-div">ABCD</div>
</div>
</div>
</div>
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
<div class="sample-name">
Line 2: atis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab sdaf sfffdaf ntoowerf jdj
</div>
<div class="sample-dash">–</div>
<div class="sample-div">EFGH</div>
</div>
</div>
</div>
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
<div class="sample-name">
Line 3: vitae dicta sunt explicabo. Nemo enim
</div>
<div class="sample-dash">–</div>
<div class="sample-div">IJKL</div>
</div>
</div>
</div>
</div>
CODEPEN
https://codepen.io/anon/pen/aEqjRo

Answer 1

Try the code below. I think you dont need to use floats at all. Use spans instead. They have inline display property.
.container {
max-width: 300px;
}
<div class="container">
<div>
Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
<span> - </span>
<span> ABCD </span>
</div>
<div>
Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
<span> - </span>
<span> EFG </span>
</div>
<div>
Lorem Ipsum bla bla bla bla bla bla bla bla bla bla bla blabla bla bla
<span> - </span>
<span> HIJ </span>
</div>
</div>

Answer 2

Using inline elements instead of floated divs fixes the issue. See https://codepen.io/anon/pen/VyQGWM?editors=1100.
<div id="sample-list">
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
Line 1: ostrum exercitationem ullam corporis
<span class="sample-dash">
–
</span>
<span class="sample-span">
ABCD
</span>
</div>
</div>
</div>
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
Line 2: atis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab sdaf sfffdaf ntoowerf jdj
<span class="sample-dash">
–
</span>
<span class="sample-span">
EFGH
</span>
</div>
</div>
</div>
<div class="sample-line">
<div class="sample-overview">
<div class="sample-name-wrap">
Line 3: vitae dicta sunt explicabo. Nemo enim
<span class="sample-dash">
–
</span>
<span class="sample-span">
IJKL
</span>
</div>
</div>
</div>
</div>
#sample-list {
margin-bottom: 35px;
float: left;
width: 400px;
background: orange;
word-wrap: break-word;
}
.sample-overview {
width: 100%;
float: left;
font-family: "open sans", "arial";
font-size: 12px;
line-height: 14px;
margin-bottom: 20px;
word-wrap: break-word;
}
.sample-name-wrap {
width: 100%;
white-space: normal;
}
.sample-dash {
margin: 0 5px;
}
.sample-span {
background: #ccc;
}
If you'd like to see why this is happening visit https://codepen.io/anon/pen/QaQVqP. The only change is a CSS border which illustrates why your floated div is wrapping to the next line.

Answer 3

Try With css Display property.
set Display: inline; to container so that DIVs inside container div sit next to each other.
Hope this helps!