CODEWITHSUNDEEP
htmlcss
Mathematics
Mathematics

Reputation: 7618

How to move this text onto another line

I got this text that I want to move onto Another line,

This is how it's looking like now,

enter image description here

This is how I want it,

enter image description here

HTML:

<div id="content">
    <div id="header">
        <p>
        <img class="header-image" src="http://www.nab.com.au/content/dam/nab/personal/credit-cards/apply-for-a-credit-card/images/icon-apply-online.gif" />
        <span id="header-text-1">Helo00oo To</span>
        <span id="header-text-2">FruitLand</span>
        </p>
    </div>
    <div id="body">
        <div id="body-title">Fruit Login</div>
        <div id="box-one"> Radio List with 2 radio buttons</div>
        <div id="box-two"> CheckBox</div>
        <div id="box-three">Textboxes x 2</div>
        <div id="body-footer">Textboxes x 2</div>
    </div>
</div>

CSS:

.header-image {
vertical-align: text-top;
}

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
}

Here's the FIDDLE if you want to try - should work on all browsers.

Upvotes: 3

Views: 1945

Answers (4)

Tot&#242;
Tot&#242;

Reputation: 1854

I like Omar Sedki's solution. An improvement is:

.header-image {
    float:left
}
#header-text-2 {
    display:block;
}
#body {
    clear: left;
}

fiddle here.

#body { clear: left;} is to keep "Fruit Login" under the image

Upvotes: 0

Neeraj
Neeraj

Reputation: 197

Try please and done

#header
{
width:100%; 
    float:left ;   
}
.header-image {
vertical-align: text-top;
    float:left;
}
#header-text-1
{
       width:50%; 
    float:left;

}
#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    width:200px;
}

Upvotes: 0

George
George

Reputation: 36784

How is the following. Display your image as a block, but float it to the left. Clear the float by giving overflow:hidden to the paragraph.

Display both of your span elements as blocks, they'll line up one beneath the other, but still clearing the image, using overflow:hidden again:

#header p{
    overflow:hidden;
}
.header-image {
    vertical-align: text-top;
    display:block;
    float:left;
}
#header-text-1, #header-text-2{
    display:block;
    overflow:hidden;
}

Pad out your <span>s as you see fit.

JSFiddle

Upvotes: 1

laaposto
laaposto

Reputation: 12213

Try with position:relative. Add this:

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    position:relative;
    top:34px;
    left:-86px;
}

And then adjust to your prefered position playing with top and left rules

DEMO

Upvotes: 1

Related Questions