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

user_1561559 0
Viewed 214171

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

alignment css image html
12 Answers

From another answer :

<table>
<tr style="background-color:white">
    <th><b>To solve your doubts &ensp; &nbsp;</b></th>
    <th><img src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" style="width:150px" style="display:inline-block; "/></th><th style="float:right"></th>
    <th><b>&ensp; has the requisite clout.</b></th>
</tr>
</table>

Demo: enter image description here

:D A little cheesy but, I thought, why not.

user_128189010

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.

user_39236840

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

user_92788650

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.

user_149132630 
<div id="container" style="display: flex;">

<div id="image" style="float:left; margin-top: 10px">
    <img src="tree.png"  align="left"/>
</div>

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

use display flex and give margin-top(10 is approximate), please remove the float and give width to both div.

user_71983280
Related