CODEWITHSUNDEEP
htmlcss
buster
buster

Reputation: 167

Long text break in div

How can I fix the text so that it stays in line with the picture ? I have tried adding "word-wrap: break-word" but it doesn't work. 

/* tell the container's children to float left: */
.float-my-children > * {
    float:left;
    margin-right:5px;
}

/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */

.clearfix {
    *zoom:1 /* for IE */
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* end clearfix*/

/* below is just to make things easier to see, not required */
body > div {
    border:1px dashed red;
    margin-bottom:10px;    
}
<div class="clearfix float-my-children">
   <img src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Balzac.jpg/220px-Balzac.jpg" width=100>
   <div>some long text here here here here here here here here here here here here here here here here here here here here here here here here</div>
</div>

https://jsfiddle.net/u9zg4vLs/

Upvotes: 0

Views: 76

Answers (1)

Naisheel Verdhan
Naisheel Verdhan

Reputation: 5133

Add float:left only to <img> tag

.float-my-children > img { float:left; margin-right:5px; }

Upvotes: 3

Related Questions