Friday, April 24, 2009

HTML - Displaying Content in the same line using DIV tag.



Normally content within DIV tag will be displayed in separate line. (i-e) Line break will be added after the content.

For example, see the below HTML code.


line1 <div>line2</div>

The browser will dislay the above code as below.
line1
line2

If you want to display it in single line as "line1 line2", you have to use SPAN tag instead of DIV tag.

Or, we need to add style as display:inline; to the div tag for displaying it in single line.

line1 <div style="display:inline;">line2</div>


Updates on April 26:
After reading above post, my team-mate asked me why we need to use "display:inline" as SPAN tag can do it simply.

Today I came-up with a situation where "display:inline" is really needed. I wanted to display an image in the same line after a text formatted using <h4> tag. Here we can't use span tag, we should be able to use only the style "display:inline".
More Articles...

1 comment:

internet marketing melbourne said...

I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will find that very useful.



Thanks for visiting our blog


twitterrss facebook linkedin YouTube subscribe




Subscribe via email

Enter your email address: