CODEWITHSUNDEEP
htmlcss
user2080812
user2080812

Reputation: 115

Display 2 DIVs in same line where one is picture

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> <a href="#">FaceBook</a> | <a href="#" target="_blank">LinedIn</a> | <a href="#">Twitter</a></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{}

Upvotes: 0

Views: 48

Answers (1)

Arbel
Arbel

Reputation: 30989

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!

Upvotes: 2

Related Questions