March 6, 2012

Div tag displaying content in new line

Question by DeanGrobler

I have code that looks like this:

<h4 class="tableTotals">Total Selected: R<div id="bankTotal">##,##</div></h4>

The output that I want should all be in ONE line but as it turns out the div tags displays it’s content in a new line, which I don’t exactly want. So the output looks like this:

Total Selected: R
##,##

When I actually want it to display like this:

Total Selected: R##,##

Does anybody know how to stop the div displaying on a new line?
Thank for any push in the right direction!

Answer by David Houde

Use <span> instead of <div>

div is a block element, and h4 is a header meant for single line.

Answer by Starx

Style your div to be displayed as inline-block

#bankTotal { display: inline-block; }

Demo

Using inline-block does not have to chang the div completely into as inline element just like span . Furthermore, you can still have block properties.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!