CODEWITHSUNDEEP
htmlcsstext-alignment
Fahim Parkar
Fahim Parkar

Reputation: 31633

setting text next to Image at top

I have the following HTML (generated by JSF)

    <div align="center">
        <img src="images/background_image.jpg" height="200px" width="30%" style="vertical-align: top"/>
        <span style="">
            Welcome abc, <input type="submit" value="logout" />.
            <br />
            Thu, 12-Jul-2012 15:46:07 AST
        </span>
    </div>

I was expecting "Thu, 12-Jul-2012 15:46:07 AST" should be next to Image, however I am getting it below image.

I am getting Welcome abc and logout button at the right side of the image.

Can someone point what I am doing wrong?

Edit 1

  1. I have used <div align="center"> just to put everything at the center.

  2. If I remove <br /> tag, I get output as Welcome abc, logout.Thu, 12-Jul-2012 15:46:07 AST. If I add <br /> tag I was expecting output as

    Welcome abc, logout.

    Thu, 12-Jul-2012 15:46:07 AST

    However because of <br /> tag I am getting output below image.

Hope this explanation helps.

I am going mad with this :(

Edit 2

jsfiddle

Upvotes: 1

Views: 1126

Answers (4)

Fahim Parkar
Fahim Parkar

Reputation: 31633

I got the solution. Code should be 

<div align="center">
    <img src="http://blog.kevinchisholm.com/wp-content/uploads/2011/11/jquery2.png" style="vertical-align: top"/>
    <span style="display:inline-block" align="right">
        Welcome abc, logout.
        <br />
    Thu, 12-Jul-2012 15:46:07 AST
    </span>
</div>

jsfiddle

Upvotes: 0

Billy Moat
Billy Moat

Reputation: 21050

First of all the first div will need to be wide enough to accomodate your image and your span with its text and also set it to overflow:auto to allow floating elemts within it.

You should then float the image and the span to the left.

The span should be set to "display:inline-block".

You'll probably want to give the image some "margin-right".

Hope that helps.

Upvotes: 1

user1520776
user1520776

Reputation:

Maybe the text in your span is too long. in this case you might define your span width to 70%, if it haven't border of course.

Upvotes: 0

Turnip
Turnip

Reputation: 36632

You need to "float" your image and span:

img, span {
    float: left;
}

Upvotes: 0

Related Questions