Total Selected: R
...">
Clever Geek Handbook

Div tag displaying content on a new line

I have some code that looks like this:

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

The result I want should be on ONE line, but as it turns out, the div tags display its content on a new line, which I definitely don't want. The result looks like this:

Total Selected: R
##,##

When I really want it to display like this:

Total Selected: R##,##

Does anyone know how to stop a div from showing on a new line? Thanks for any push in the right direction!

+3


source to share


8 answers


Use <span>

instead<div>



div is a block element and h4 is a single line header.

+6


source


The style of your div will render as inline-block 

#bankTotal { display: inline-block; }


Demo

Usage inline-block

should not completely change div

as an element inline

, like span

. Plus, you can still have block properties.

+3


source 


<div> is a block element and will put a return before and after the <div>

You should use instead.

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


source


Using CSS:

#bankTotal{
   display:inline;
}
+1


source


displaying a div on a new line?

<div id="bankTotal" style="display:inline">##,##</div>

or

<div id="bankTotal" style="float:left">##,##</div>

but better:

<span id="bankTotal"  >##,##</span >
+1


source


display:inline

a css property to display the "inline" div, or u can use a tag <span>

instead of a tag <div>

.

0


source 


<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
0


source


Here I added a style to manually position the DIV wherever you want. Note that I have not positioned it exactly, so just play with the PX field.

<h4 class="tableTotals">Total Selected: R<div id="bankTotal" style="margin-left:50px;margin-top:-10px;">##,##</div></h4>
0


source






More articles:


All Articles