Prevent linebreak after div

Question

Is there a way to prevent a line break after a div with css   For example I have   lt div class  label  gt My Label  lt  div gt   lt div class  text  gt My text lt  div gt    and want it to display like      My Label  My text

User · Answer

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

User · Answer

lt div id  hassaan  gt        lt div class  label  gt My Label  lt  div gt        lt div class  text  gt My text lt  div gt   lt  div gt    CSS    hassaan  margin auto  width 960px    hassaan nth-child n   clear both    label   text  width 480px  float left

User · Answer

try this  in CSS  for preventing line breaks in div texts   white-space  nowrap

User · Answer

I don t think I ve seen this version    lt div class  label  gt My Label  lt span class  text  gt My text lt  span gt  lt  div gt

User · Answer

lt span class  label  gt My Label  lt  span gt   lt span class  text  gt My text lt  span gt

User · Answer

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

User · Answer

use this code for normal div display  inline   use this code if u use it in table  display  inline-table  better than table

User · Answer

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

User · Answer

Try applying the clear none css attribute to the label    label        clear none

User · Answer

label   text  display  inline    Although if you use that  you might as well change the div s to span s

User · Answer

try float your div s in css   label   float left  width 200px     text   float left

User · Answer

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    lt label gt My Label  lt  label gt   lt span gt My text lt  span gt

User · Answer

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

[css] Prevent linebreak after </div>

Examples related to css

Examples related to html