Display 2 DIVs in same line where one is picture - html

Question

I have 2 divs, one should be on left side and the other on right side but in same line.
Behind I want to have parent div (#author-box) with grey background that will have height depending on the right div text height, so when you change devices if author-txt goes below author-img the gray background should be behind both of the divs.
I tried float left but then the gray background is really small and doesn't follow author-txt and author-img height.
Also I tried display:inline, but then text starts from the lower part of the image.
<div id="author-box">
<div class="author-img"><img src="img.jpg" width="150px" height="149px" /></div>
<div class="author-txt"><strong>About the author</strong><br/>author text<br/><strong>Connect with me:</strong> FaceBook | LinedIn | Twitter</div>
</div>
#author-box {
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img{}
.author-img img{
border-radius: 100px;
}
.author-txt{}

Answer 1

It's very simple: (there are many other ways too)
.author-img {
display:inline-block;
}
.author-txt {
display:inline-block;
vertical-align: top;
}
Demo: http://jsfiddle.net/sem3qyyo/
If you want to use floating, you will need to "clear" the container:
#author-box:after { /* just one method of clearing, there are others too */
display:table;
clear: both;
content:" ";
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/1/
Or use floating and overflow: auto; on the container if your design allows it:
#author-box:after {
overflow: auto; /* add this */
background-color: #ECECEC;
margin-bottom: 10px;
font-size: 15px;
padding: 10px;
}
.author-img {
float:left;
}
.author-txt {
float:left;
}
Demo: http://jsfiddle.net/sem3qyyo/2/
And this can go on!