HTML - image to the left of div - html

Question

I am trying to display an outer div with an image on the left and another div with some text to the right on it. I use:
img {
float: left;
}
div.out {
background-color: blue;
padding: 10px;
}
div.in {
background-color: yellow;
padding: 5px;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
</div>
Code works almost fine as shown below but how can I make the first blue div extend to the very end of where the image ends? Also, how can I add a 10px space let's say between the image and the text? (And also, is my way of adding float: left; to the img the best way to display it to the left or is there a better way?)
Thanks a lot

Answer 1

img {
display: inline-block;
}
div.out {
background-color: blue;
padding: 10px;
display: flex;
}
div.in {
display: inline-block;
width: 100%;
background-color: yellow;
padding: 5px;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
</div>
I recommend you should learn how to use flex

Answer 2

You can use the flexbox model for this. Remove the float and on the outer div use display: flex;, and the inner div flex-grow: 1;:
#flexbox_container {
display: flex;
background-color: blue;
padding: 10px;
}
div.flex_item {
background-color: yellow;
padding: 10px;
flex-grow: 1;
}
<div id="flexbox_container">
<img class="flex_item" src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="flex_item item_selected">
Flowers
<br>are
<br>cool</div>
</div>

Answer 3

img {
float: left;
}
div.out {
background-color: blue;
padding: 10px;
}
div.in {
background-color: yellow;
padding: 5px;
}
.clr {
clear: both;
}
<div class="out">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">
Flowers<br>are<br>cool
</div>
<div class="clr"></div>
</div>
If you're looking for the blue box to extend to the end of your floated content, your looking for a clear fix. See the minor change above with the added div with class clr.
-- Edit of all edits --
Realized after doing what you asked... it probably wasn't EXACTLY what you meant to ask. But I got the blue box to extend to where the image ends haha.

Answer 4

display:flex don't support in IE9 and earlier, So i use of other way :
.out {
background-color: blue;
padding: 15px;
}
.content {
background-color: yellow;
}
.content:after {
content: '';
display: block;
clear: both;
}
.in {
padding-top: 5px;
}
img {
float: left;
margin-right: 5px;
}
<div class="out">
<div class="content">
<img src="https://i1.rgstatic.net/ii/profile.image/AS%3A272372255162386%401441950014433_m/Wachiraya_Imsabai.png">
<div class="in">Flowers<br>are<br>cool</div>
</div>
</div>