Reputation: 5194
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>
and want it to display like:
My Label: My text
Upvotes: 121
Views: 231084
Reputation: 3160
Try this in CSS for preventing text line breaks in <div>
:
white-space: nowrap;
Upvotes: 11
Reputation: 9489
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
Upvotes: 0
Reputation: 12962
Try applying the clear:none
css attribute to the label.
.label {
clear:none;
}
Upvotes: 1
Reputation: 700362
The div
elements are block elements, so by default they take upp the full available width.
One way is to turn them into inline elements:
.label, .text { display: inline; }
This will have the same effect as using span
elements instead of div
elements.
Another way is to float the elements:
.label, .text { float: left; }
This will change how the width of the elements is decided, so that thwy will only be as wide as their content. It will also make the elements float beside each other, similar to how images flow beside each other.
You can also consider changing the elements. The div
element is intended for document divisions, I usually use a label
and a span
element for a construct like this:
<label>My Label:</label>
<span>My text</span>
Upvotes: 5
Reputation: 72870
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?
Upvotes: 12
Reputation: 3720
.label, .text {display: inline}
Although if you use that, you might as well change the div's to span's.
Upvotes: 12
Reputation: 326
<div id="hassaan">
<div class="label">My Label:</div>
<div class="text">My text</div>
</div>
CSS:
#hassaan{ margin:auto; width:960px;}
#hassaan:nth-child(n){ clear:both;}
.label, .text{ width:480px; float:left;}
Upvotes: 1
Reputation: 99
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
Upvotes: 4
Reputation: 27465
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
Upvotes: 2
Reputation: 12711
I have many times succeeded to get div's without line breaks after them, by playing around with the float css attribute and the width css attribute.
Of course after working out the solution you have to test it in all browsers, and in each browser you have to re-size the windows to make sure that it works in all circumstances.
Upvotes: 0
Reputation: 4840
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.
Upvotes: 188
Reputation: 4828
div's are used to give structure to a website or to contain a lot of text or elements, but you seem to use them as label, you should use span, it will put both text next to eachother automatically and you won't need to wright css code for it.
And even if other people tell you to float the elements it's best that you just change the tags.
Upvotes: 4
Reputation: 2900
<span class="label">My Label:</span>
<span class="text">My text</span>
Upvotes: 10