Can't align picture and text beneath each other

Question

I've been trying to do a ridiculously basic task but can't get it through. I cannot figure how to make the second image be right below the first one. This is frustrating!!

fiddle here: http://jsfiddle.net/dvir0776/v9v512tm/

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
    <div style="text-align:left; font-size:8pt;">
    <h5 style="margin-bottom:0;">Chris Fanelli</h5>
    comment comment comment comment comment comment comment comment comment comment!</div>
</div>

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
    <div style="text-align:left; font-size:8pt;">
    <h5 style="margin-bottom:0;">Chris Fanelli</h5>
    comment comment comment comment comment comment comment comment comment comment!</div>
</div>

Any tweak to fix it will be great.

Clearing the floats is the way to go, but how about we clean up your markup, and separate the CSS [like in this example](http://jsfiddle.net/2k9k5jgg/2/)? — misterManSam, Sep 21 '14 at 07:20

score 2 · Answer 1 · answered Sep 21 '14 at 07:10

Those answers should work, but here is an alternative. It uses display: table-row;. I adding padding-top: 10px; just for aesthetics. The container may not be necessary.

CSS

.container {
    width: Auto;
}
.comment {
    display: table-row;
    padding-top: 10px;
}
.comment img {
    display: table-row;
    padding-top: 10px;
}

HTML

<div class="container">
    <div class="comment">
        <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
        <div style="text-align:left; font-size:8pt;">
             <h5 style="margin-bottom:0;">Chris Fanelli</h5>
comment comment comment comment comment comment comment comment comment comment!</div>
    </div>
    <div class="comment">
        <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
        <div style="text-align:left; font-size:8pt;">
             <h5 style="margin-bottom:0;">Chris Fanelli</h5>
comment comment comment comment comment comment comment comment comment comment!</div>
    </div>
</div>

score 1 · Accepted Answer · edited May 23 '17 at 12:12

1

Line boxes wraps floated elements. You should clear the float at the end of the container, the .comment.

Either by the traditional way:

<div class="comment">
    <img src="d.jpg" style="width:13%; margin-right: 12px; float:left;" />
    <!-- ... -->
    <div class="clearfix"></div>
</div>

.clearfix { clear: both; }

Or by something newer:

.comment:after {
    content: "";
    display: block;
    clear:both;
}

edited May 23 '17 at 12:12

Community

1
1

answered Sep 21 '14 at 07:05

Hashem Qolami

97,268
26
150
164

Comments are going to stack on top of each other, so why not just `.comment { clear: left; }` – misterManSam Sep 21 '14 at 07:34
@misterManSam Then what will happen to the rest of document flow? http://jsfiddle.net/hashem/v9v512tm/4/ – Hashem Qolami Sep 21 '14 at 07:37
Well, it's not [really a problem to clear a float one more time](http://jsfiddle.net/v9v512tm/6/) and comments are often at the bottom of the document, leaving maybe just a footer to clear. I would say it's a viable option. – misterManSam Sep 21 '14 at 07:43
@misterManSam Yes only if you are aware of the layout structure which is not specified by the OP. It depends on the layout. I'd go with solutions which stand by their own. – Hashem Qolami Sep 21 '14 at 07:48
Of course, though it can't hurt to have it as an option with a side note about clearing the following elements after `.comment`. It is a valid method after all. – misterManSam Sep 21 '14 at 07:55
fantastic! You just made a 20yo a little wiser :) – david Sep 23 '14 at 01:59

karan3112 · Answer 3 · 2014-09-21T07:14:04.777

0

All you have to do is add clearfix class to the comment div.

.clearfix:after {
 visibility: hidden;
 display: block;
 font-size: 0;
 content: " ";
 clear: both;
 height: 0;

}

DEMO

edited Sep 21 '14 at 07:14

answered Sep 21 '14 at 07:06

karan3112

1,867
14
20

score 0 · Answer 4 · answered Sep 21 '14 at 07:06

Add a "clear:left" style to the 2nd div

<div class="comment"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
         <div style="text-align:left; font-size:8pt;">
         <h5 style="margin-bottom:0;">Chris Fanelli</h5>
         comment comment comment comment comment comment comment comment comment comment!</div>
         </div>

<div class="comment" style="clear:left"><img src="d.jpg" style="width:13%; margin-right: 12px; float:left;">
         <div style="text-align:left; font-size:8pt;">
         <h5 style="margin-bottom:0;">Chris Fanelli</h5>
         comment comment comment comment comment comment comment comment comment comment!</div>
         </div>

Can't align picture and text beneath each other

4 Answers4