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


I have 2 divisions, one should be on the left side and the other on the right, but in the same line

At the back, I want the original div (# author-box) with a brown background, which will be the height of the right div text height, so when you change the tool, author- txt authors -Img goes down the gray background should be behind both divs.

I left the float but then the gray background is actually small and does not follow the author-txt and author-img height

Besides that, I also tried to perform : Inline, but then the text begins with the lower part of the image.

  & lt; Div id = "author-box" & gt; & Lt; Div class = "author-img" & gt; & Lt; Img src = "img.jpg" width = "150px" height = "14 9px" /> & lt; / Div & gt; & Lt; Div class = "author-txt" & gt; & Lt; Strong & gt; About the author & lt; / strong> & Lt; Br / & gt; Author Text & lt; Br / & gt; & Lt; Strong & gt; Connect with me: & lt; / strong> & Lt; A href = "#" & gt; Faceback & lt; / A & gt; | & Lt; A href = "#" target = "_ blank" & gt; Landed In & lt; / A & gt; | & Lt; A href = "#" & gt; Twitter & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; #Auth-box {background-color: #CEEEEECE; Margin-down: 10px; Font-size: 15px; Padding: 10px; } .author-img {} .author-img img {boundary-radius: 100px; } .author-txt {}    

It is very easy: (There are many other ways Too)

  .author-img {display: inline-block; } .author-txt {display: inline-block; Vertical-alignment: top; }   

Demo :

If you want to use float IN, Container:

  # author-box: after {/ * only one method of clearing, there are also others * / display: table; Clean both; material:" "; } .author-img {float: left; } .author-txt {float: left; }   

Demo :

or float ING and overflow: auto; Use the container if your design allows it:

  # author-box: {overflow: auto; / * Add * this * / background color: #EECEEC; Margin-down: 10px; Font-size: 15px; Padding: 10px; } .author-img {float: left; } .author-txt {float: left; }   

Demo :

And it can be turned on!

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -