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
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.
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?
<span class="label">My Label:</span>
<span class="text">My text</span>
try this (in CSS) for preventing line breaks in div texts:
white-space: nowrap;
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>
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.
I don't think I've seen this version:
<div class="label">My Label:<span class="text">My text</span></div>
<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;}
Try applying the clear:none css attribute to the label.
.label {
clear:none;
}
use this code for normal div
display: inline;
use this code if u use it in table
display: inline-table;
better than table
try float your div's in css
.label {
float:left;
width:200px;
}
.text {
float:left;
}
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.
display: inline-block worked for me
Related
i have taken this h1 and i have given it a class and applied border bottom to it so that i can give a nice underline effect.
I can use text-decoration property but giving bold underline effect gives me the ability to have width of underline line.
When i give h1 an underline, the border goes to 100% full width of the container.
please tell me how to fix it.
thanks.
Use display: inline the reason why the H1 is showing the border all the way across is because it is a displaying block by default. Hope this helps!
Because h1 is a block level element and by default this element take a 100% width. so make it a inline element.
here is the CSS to build the h1 as a inline element.
h1{border-bottom:1px solid red;display:inline-block;}
here is the HTML
<h1>My First Heading</h1>
Here is a Demo.. http://jsbin.com/voyuluyo/1/edit
HTML
<h1 class="headings"> hi this is SO </h1>
<h1 class="headings1"> hi this is SO </h1>
CSS
.headings
{
border-bottom:10px solid black;
}
.headings1
{
display:inline-block;
border-bottom:10px solid red;
}
Fiddle
Working Demo
Output:
As RaySinlao said, display:block will make it expand all the way. If you want to make the next element go to the next line, display:inline won't work. Use display:table. Table will shrink-wrap (to fit contents) or expand (to fix weird bugs) or clearfix. Come to think of it, table does a lot of stuff.
What is the best way to wrap text where the indentation is set by the word before it, so that any wrapped text will continue with the same indentation. Like this:
http://i.imgur.com/61rVCQk.png
I made a JSfiddle to work with as well - http://jsfiddle.net/dangoodspeed/DbYFb/1/
.left { float:left; font-weight:bold; margin-right:.5em; }
I know I can do it with a table for each line, but there has to be a better way.
This seems to produce exactly the effect you need, according to your screenshot. You said you didn't want tables. Those aren't exactly tables, just divs that behave like table cells :)
http://jsfiddle.net/DbYFb/18/
Rows are wrapped in a div that behaves normally, while both columns are given display: table-cell to get the effect you want. Whether this is a better way than using an actual table is up to you.
<div class="row">
<div class="left">Name:</div>
<div class="right">John Doe</div>
</div>
.row div {
display: table-cell;
}
if you float element, give them a width and add overflow:hidden to element aside in the flow, you get it :
http://jsfiddle.net/DbYFb/3/
.left {
float:left;
font-weight:bold;
margin-right:.5em;
width:5em;
}
.right {overflow:hidden;}
see http://css-tricks.com/all-about-floats/ for more about floatting elements :)
I have two span(s) positioned adjacent to one another within a parent div.
<div>
<span id="x1"> </span>
<span id="x2"> </span>
</div>
I want the 2nd span to be shown leftmost & then 1st span. (Note: for some reasons I cannot simply move the 2nd span in place of 1st span in html code). How can I display 2nd span on leftmost ?
Edit:
float:left; on 2nd span seems to do the trick but not sure if this would be cross browser consistent in terms of this behavior!?
Use the float: left css.
It is supported in all browsers.
HTML
<div><span>Will be leftmost</span><span>Will be right most</span></div>
CSS
div span {float: left;}
Note that adding float on spans will cause them to not be inline elements, if this matters.
That is doing the trick :
span#x2 {
float:left;
}
See on the jsfiddle.
It is cross-browser.
I have several DIV's displayed as inline-blocks; and they seem to be getting spacing automatically applied in between them from the browser. They have margin/padding set to 0. Is there a way to correct this without using negative margins?
Sam, that space you're seeing is actually whitespace. That's why removing the paddings and margins does nothing. Let me explain. When you have this:
HTML
<div>
a
a
a
a
</div>
this is how it's rendered:
a a a a
...right?
So, if you have this:
<div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
<div style="display:inline-block"></div>
</div>
...you'll get the same thing:
block [space] block [space] block
Now... there are many different solutions to this problem. I believe the most common is commenting out the whitespace in the html:
<div>
<div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div><!--
--><div style="display:inline-block"></div>
</div>
I don't like it though - I prefer keeping the html as clean as possible. My preferred way is to set the parent's font-size to 0, and then set back the desired font-size on the inline-blocks themselves. Like so:
div {
font-size: 0; /* removes the whitespace */
}
div div {
display: inline-block;
font-size: 14px;
}
You don't need to use negative margins to offset the original margins.
Instead you can override them with the following:
* { margin:0; }
or:
.div { margin:0; }
if it's element specific.
EDIT:
It appears the problem may be a result of unintended whitespace. For instance:
<div style="display:inline-block">
...
</div>
<div style="display:inline-block">
...
</div>
There exists white space between the two dividers and the browser will print the white space as a result. To fix this, you'll need to change it to:
<div style="display:inline-block">
...
</div><div style="display:inline-block">
...
</div>
Enjoy and good luck!
You can use both display: inline-block and float: left to remove that space.
Here goes plunkr: https://plnkr.co/edit/Sn3NG77asiXO8UrrpxWD?p=preview
Inline-block is originally a IE6 hack
This is what its used for:
To fix the IE6 double-margin bug on floated elements
To place multiple block-like elements on the same horizontal line
without floating them(if you can't float 'exceptional cases)
To allow an inline element to have width and/or height while still
remaining inline
To allow an inline element to have padding or margins
So if you wanna have multiple divs beside eachother please use float, its gonna solve many of your css problems that inline-block can cause, especially cross browser issues
More about inline-block here arcticle 9.2.4
Best regards
SP
please comment if disagree
Another way I have found the method altering the word-spacing on the parent container works for me https://jsfiddle.net/1ex5gpo3/2/
.parent {
word-spacing: -1em;
}
.child {
word-spacing: normal;
display: inline-block;
}
I have html:
<div class="field-label"><label>Email: </label></div>
<div class="field"><input class="input" ......></div>
and piece of css:
.field-label { clear:left; float:left; padding:0.5em; width:6em; }
.field { padding:0.5em; }
And it worked fine. But for some elements I wanted to apply following change:
when I add width to .field class layout goes to blazes: element with .field class appears under element with field-label class. Container of whole form is width enough to hold elements with field-label & field class.
Why is it happening, did I miss something in css basics?
Thanks ,Pawel
Did you take into account that padding, margin etc. is not included in width?
You might be better off using spans instead of divs for this layout, as spans are inline elements they might behave better than divs. Also, do you have a live example?
If the label and the field should appear on one line, you have to have a around the two 's witn an explicit width wide enought to contain the two others.