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!
Use <span>
instead<div>
div is a block element and h4 is a single line header.
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.
<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>
Using CSS:
#bankTotal{
display:inline;
}
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 >
display:inline
a css property to display the "inline" div, or u can use a tag <span>
instead of a tag <div>
.
<h4 class="tableTotals" style="display:inline;">Total Selected: R<div id="bankTotal" style="float:left;">##,##</div></h4>
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>