Prevent linebreak after </div>
<span class="label">My Label:</span>
<span class="text">My text</span>
A DIV is by default a BLOCK display element, meaning it sits on its own line. If you add the CSS property display:inline it will behave the way you want. But perhaps you should be considering a SPAN instead?
display:inline;
OR
float:left;
OR
display:inline-block;
-- Might not work on all browsers.
What is the purpose of using a div
here? I'd suggest a span
, as it is an inline-level element, whereas a div
is a block-level element.
Do note that each option above will work differently.
display:inline;
will turn the div
into the equivalent of a span
. It will be unaffected by margin-top
, margin-bottom
, padding-top
, padding-bottom
, height
, etc.
float:left;
keeps the div
as a block-level element. It will still take up space as if it were a block, however the width will be fitted to the content (assuming width:auto;
). It can require a clear:left;
for certain effects.
display:inline-block;
is the "best of both worlds" option. The div
is treated as a block element. It responds to all of the margin
, padding
, and height
rules as expected for a block element. However, it is treated as an inline element for the purpose of placement within other elements.
Read this for more information.
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.