CODEWITHSUNDEEP
csshtml
user818700
user818700

Reputation:

Div tag displaying content in new line

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!

Upvotes: 3

Views: 9033

Answers (8)

user1248192
user1248192

Reputation: 3

Here I have added a style to position the DIV manually to where you want it to be. Please note that I didn't put it in its exact position so just fiddle with the margin PX.

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

Upvotes: 0

Starx
Starx

Reputation: 78971

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.

Upvotes: 3

Shyju
Shyju

Reputation: 218722

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

Upvotes: 0

Bhavesh G
Bhavesh G

Reputation: 3028

display:inline property of css for displaying the div "inline", or u could use <span> tag instead of <div> tag ..

Upvotes: 0

Keesjan
Keesjan

Reputation: 108

<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>

Upvotes: 2

David Houde
David Houde

Reputation: 4778

Use <span> instead of <div>

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

Upvotes: 6

Royi Namir
Royi Namir

Reputation: 148524

div displaying 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 >

Upvotes: 1

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

Using CSS:

#bankTotal{
   display:inline;
}

Upvotes: 1

Related Questions