align an image and some text on the same line without using div width

Question

Ok so I m trying to align an image which is contained in a div  and some text also contained in a div  on the same line  without setting width for the text  how can i do it  This is what I have so far    lt div id  container  gt        lt div id  image  style  float left   gt           lt img src  tree png   align  left   gt       lt  div gt        lt div id  texts  style  float left   gt           A very long text about 300 words        lt  div gt    lt  div gt    When the text is short  the image and text can be fit into the same line  but my text is pretty long  and it automatically jumps on another line below the image    Basically  now it s this  http   puu sh MPw2 I want to make this  http   puu sh MPvr  I m been trying to solve this problem for like 3 hours I m so noob please help   S

User · Answer

Floating will result in wrapping if space is not available.

You can use display:inline and white-space:nowrap to achieve this. Fiddle

<div id="container" style="white-space:nowrap">

    <div id="image" style="display:inline;">
        <img src="tree.png"/>
    </div>

    <div id="texts" style="display:inline; white-space:nowrap;"> 
        A very long text(about 300 words) 
    </div>

</div>?

User · Answer

I was working on a different project when I saw this question  this is the solution I used and it seems to work     image id    p           vertical-align  middle          display  inline-block          if it doesn t  just try    float right   float left    or  display  inline instead of inline-block  This worked for me  hope this helped

User · Answer

Method1   Inline elements do not use any width or height you specify  To avoid two div and use like this     lt div id  container  gt   lt img src  tree png   align  left   gt   lt h1 gt  A very long text about 300 words   lt  h1 gt   lt  div gt       lt style gt              img                   display  inline                  width  100px                  height  100px                            h1                   display  inline                         lt  style gt    Method2   Change your CSS as follows   container div       display  inline-block          Method3   It is the simple method set width Try the following css    container div   overflow hidden  position relative  width 90   margin-bottom 20px  margin-top 20px  margin-left auto  margin-right auto     image   width 70   display  inline-block  float  left     texts    height  auto  width  30   display  inline

User · Answer

To get the desired effect  you should place the image tag inside the same div as your text   Then set the float  left attribute on the image   Hope this helps

User · Answer

I know this question is over 6 years old  but still  I would like to share my method using tables and this won t require any CSS     lt table gt  lt tr gt  lt td gt  lt img src  loading gif  gt  lt  td gt  lt td gt  Loading    lt  td gt  lt  tr gt  lt  table gt    Cheers  Happy Coding

User · Answer

Try    lt p gt Click on  lt img src   storage help button2 1 png  width  auto   height  28 align  middle   gt  button will show a page as bellow lt  p gt    It works for me

User · Answer

Try   lt img src  assets img logo png  align  left    gt  Text Goes here   Simple HTML Attribute   align  left    Other values for attribute    bottom left  middle right top

User · Answer

Just set the img css to be display inline or display inline-block

User · Answer

U wrote an unnecessary div  just leave it like this  x000D   x000D   lt div id  texts  style  white-space nowrap   gt        lt img src  tree png   align  left   gt       A very long text about 300 words    lt  div gt  x000D   x000D   x000D   What u are looking for is white-space nowrap  this code will do the trick

User · Answer

I built on the last answer and used display table for an outer div  and display table-cell for inner divs   This was the only thing that worked for me using CSS

[css] align an image and some text on the same line without using div width?

Examples related to css

Examples related to image

Examples related to html

Examples related to alignment