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.

<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

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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!

Solution 5

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!

View more solutions

Comments

[rafaelbiten]

What you're trying to do is not clear to me. What I think you should try is setting a new style to both your divs. Try: "display: inline;". And you're using inline styles just to ask your question or you're doing it also in your project? Also, I'm not quite sure if you really want to use an "id" instead of a "class" for "image" and "texts".

[Maria]

Basically, now it's this: puu.sh/MPw2 I want to make this: puu.sh/MPvr

[rafaelbiten]

Ok, so you have to add a width to your #image, and a width to your #texts... you can try adding to each one of them something like: "width: 30%;", just an example. Since you don't have a width to your divs and they are "block" elements, each one is using 100% of existing width, making them sit one below the other, even if you're "floating" them.

[Maria]

yea I tried with width it works, but how can i make it work without using width? :S cuz I'm trying to make it work on iPhone, and once I set some width, on iphone(cuz the screen is slim) will not see the entire text

[rafaelbiten]

You have fixed widths on iphone, so you can set fixed widths there too. Imagine the iphone has a width of 960x640px. You can set your #container to width: 640px; your #image to width: 300px; and your #texts to width: 300px; and this will work.

[Paul Fleming]

@user1561559. It is working for me in IE9, FF14, Safari 5.1.1, Chrome 20. Where is it not working for you?

[Maria]

well when the text is very long, like 300 words or something, the text will exceed the screen width, then i have to scroll horizontally to see the entire text

[Geek Stocks]

Still works great in 2018; should be the accepted answer.

[Admin]

width, height and align parameters are obsolete.

[waqasahmed]

We shouldn't be using tables in 2018 for showing anything other than tabular data!