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

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.

<div id="container">

    <div id="image" style="float:left;">
        <img src="tree.png"  align="left"/>
    </div>

    <div id="texts" style="float:left;"> 
        A very long text(about 300 words) 
    </div>

</div>

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

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

Method1:

Inline elements do not use any width or height you specify. To avoid two div and use like this:

 <div id="container">
<img src="tree.png"  align="left"/>
<h1> A very long text(about 300 words) </h1>
</div>
    <style>
            img {
                display: inline;
                width: 100px;
                height: 100px;
            }
            h1 {
                display: inline;
            }
        </style>

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;
}

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!

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!

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>?

U wrote an unnecessary div, just leave it like this

<div id="texts" style="white-space:nowrap;">
     <img src="tree.png"  align="left"/>
     A very long text(about 300 words) 
</div>

What u are looking for is white-space:nowrap; this code will do the trick.

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.

Try

<img src="assets/img/logo.png" align="left" />
Text Goes here

Simple HTML Attribute:

align="left"

Other values for attribute:

• bottom
• left
• middle
• right
• top

Try

<p>Click on <img src="/storage/help/button2.1.png" width="auto" 
height="28"align="middle"/> button will show a page as bellow</p>

It works for me

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.

<table><tr><td><img src="loading.gif"></td><td> Loading...</td></tr></table>

Cheers! Happy Coding