Is there a way to prevent a line break after a div with css?
For example I have
<div class="label">My Label:</div>
<div class="text">My text</div>
My Label: My text
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
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
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.