CODEWITHSUNDEEP
htmlcss
Denoteone
Denoteone

Reputation: 4055

Text Image Text inline HTML CSS

What is the best way to have text and then an image with text following? I dont want to use table if possible but I am running into issues with the items breaking onto their own lines.

Below is my code and css so far:

<div id="header_number">
    <h2 class="phone_title">Call Us Today!</h2>
    <img src="images/phone_icon.jpg" alt="Call us Today"/>
    <h2 class="large_num">1-800-555-9999</h2>
</div>

CSS:

h2.phone_title{font: 13px arial;Color:#013173;text-align:left;}
h2.large_num{font:29px arial;Color:#013173;text-align:left;}
#header_number{float:right;height:60px;width:332px;display:inline;}

I thought the display:inline; in the container div (header_number) would line everything up but that didn't work. If needed I can add a class to the img and float everything left if that is my only option.

Upvotes: 3

Views: 6465

Answers (1)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Now Define your some element display:inline-block; or vertical-align:top

as like this 

h2.phone_title, h2.large_num, img
{display:inline-block;vertical-align:top;
margin:0;
}

Now check to live demo

Upvotes: 5

Related Questions