How do you make div elements display inline

Question

Given this HTML    lt div gt foo lt  div gt  lt div gt bar lt  div gt  lt div gt baz lt  div gt    How do you make them display inline like this      foo bar baz   not like this      foo   bar   baz

User · Answer

An inline div is a freak of the web  amp  should be beaten until it becomes a span  at least 9 times out of 10       lt span gt foo lt  span gt   lt span gt bar lt  span gt   lt span gt baz lt  span gt       answers the original question

User · Answer

ok  for me      lt style type  text css  gt      div          position  relative          display  inline-block          width 25px          height 25px         lt  style gt   lt div gt toto lt  div gt   lt div gt toto lt  div gt   lt div gt toto lt  div gt

User · Answer

Having read this question and the answers a couple of times  all I can do is assume that there s been quite a bit of editing going on  and my suspicion is that you ve been given the incorrect answer based on not providing enough information  My clue comes from the use of br tag   Apologies to Darryl  I read class  inline  as style  display  inline   You have the right answer  even if you do use semantically questionable class names  -    The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking    If you re wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline   Floated divs                                                                                                                                                                                                                    Inline divs                                                                                                        If you re after the former  then this is your solution and lose those br tags    lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt    note that the width of these divs is fluid  so feel free to put widths on them if you want to control the behavior   Thanks  Steve

User · Answer

An inline div is a freak of the web  amp  should be beaten until it becomes a span  at least 9 times out of 10       lt span gt foo lt  span gt   lt span gt bar lt  span gt   lt span gt baz lt  span gt       answers the original question

User · Answer

lt span gt

User · Answer

You should use  lt span gt  instead of  lt div gt  for correct way of   inline  because div is a block level element  and your requirement is for inline-block level elements    Here is html code as per your requirements          lt div class  main-div  gt    lt div gt foo lt  div gt    lt div gt bar lt  div gt    lt div gt baz lt  div gt    lt  div gt    You ve two way to do this     using simple display inline-block  or using float left    so you ve to change display property display inline-block  forcefully  Example one  div       display  inline-block      Example two   div       float  left         you need to clear float    main-div after       content          clear  both      display  table

User · Answer

You need to contain the three divs  Here is an example   CSS  div contain     margin 3     border  none    height  auto    width  auto    float  left     div contain div     display inline    width 200px    height 300px    padding  15px    margin  auto    border 1px solid red    background-color  fffff7    -moz-border-radius 25px     Firefox      border-radius 25px      Note  border-radius attributes are optional and only work in CSS3 compliant browsers   HTML   lt div class  contain  gt     lt div gt Foo lt  div gt   lt  div gt    lt div class  contain  gt     lt div gt Bar lt  div gt   lt  div gt    lt div class  contain  gt     lt div gt Baz lt  div gt   lt  div gt    Note that the divs  foo   bar  and  baz  are each held within the  contain  div

User · Answer

lt style type  text css  gt  div inline   display inline     lt  style gt   lt div class  inline  gt a lt  div gt   lt div class  inline  gt b lt  div gt   lt div class  inline  gt c lt  div gt

User · Answer

Use display inline-block with a margin and media query for IE6 7    lt html gt     lt head gt       lt style gt        div   display inline-block             IE6-7           media                        div   display  inline  margin-right 10px                    lt  style gt     lt  head gt     lt div gt foo lt  div gt     lt div gt bar lt  div gt     lt div gt baz lt  div gt   lt  html gt

User · Answer

Having read this question and the answers a couple of times  all I can do is assume that there s been quite a bit of editing going on  and my suspicion is that you ve been given the incorrect answer based on not providing enough information  My clue comes from the use of br tag   Apologies to Darryl  I read class  inline  as style  display  inline   You have the right answer  even if you do use semantically questionable class names  -    The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking    If you re wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline   Floated divs                                                                                                                                                                                                                    Inline divs                                                                                                        If you re after the former  then this is your solution and lose those br tags    lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt    note that the width of these divs is fluid  so feel free to put widths on them if you want to control the behavior   Thanks  Steve

User · Answer

Having read this question and the answers a couple of times  all I can do is assume that there s been quite a bit of editing going on  and my suspicion is that you ve been given the incorrect answer based on not providing enough information  My clue comes from the use of br tag   Apologies to Darryl  I read class  inline  as style  display  inline   You have the right answer  even if you do use semantically questionable class names  -    The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking    If you re wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline   Floated divs                                                                                                                                                                                                                    Inline divs                                                                                                        If you re after the former  then this is your solution and lose those br tags    lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt    note that the width of these divs is fluid  so feel free to put widths on them if you want to control the behavior   Thanks  Steve

User · Answer

Try writing it like this    x000D   x000D  div   border  1px solid  CCC    x000D       lt div style  display  inline  gt a lt  div gt  x000D       lt div style  display  inline  gt b lt  div gt  x000D       lt div style  display  inline  gt c lt  div gt  x000D   x000D   x000D

User · Answer

I know people say this is a terrible idea  but it can in practice be useful if you want to do something like tile images with comments underneath them   e g  Picasaweb uses it to display the thumbnails in an album  See for example demo http   closure-library googlecode com svn trunk closure goog demos inline block quirks html   class goog-inline-block   I abbreviate it to ib here       below is a set of hacks to make inline-block work right on divs in IE     html  gt  body  ib   display inline-block     ib  display inline-block position relative     html  ib   display  inline     first-child   html  ib   display inline      Given that CSS  set your div to class ib  and now it s magically an inline block element

User · Answer

lt style type  text css  gt  div inline   display inline     lt  style gt   lt div class  inline  gt a lt  div gt   lt div class  inline  gt b lt  div gt   lt div class  inline  gt c lt  div gt

User · Answer

lt span gt

User · Answer

You should use  lt span gt  instead of  lt div gt  for correct way of   inline  because div is a block level element  and your requirement is for inline-block level elements    Here is html code as per your requirements          lt div class  main-div  gt    lt div gt foo lt  div gt    lt div gt bar lt  div gt    lt div gt baz lt  div gt    lt  div gt    You ve two way to do this     using simple display inline-block  or using float left    so you ve to change display property display inline-block  forcefully  Example one  div       display  inline-block      Example two   div       float  left         you need to clear float    main-div after       content          clear  both      display  table

User · Answer

As mentioned  display inline is probably what you want   Some browsers also support inline-blocks     http   www quirksmode org css display html inlineblock

User · Answer

Try writing it like this    x000D   x000D  div   border  1px solid  CCC    x000D       lt div style  display  inline  gt a lt  div gt  x000D       lt div style  display  inline  gt b lt  div gt  x000D       lt div style  display  inline  gt c lt  div gt  x000D   x000D   x000D

User · Answer

As mentioned  display inline is probably what you want   Some browsers also support inline-blocks     http   www quirksmode org css display html inlineblock

User · Answer

we can do this like   left       float left      margin 3px     lt div class  left  gt foo lt  div gt   lt div class  left  gt bar lt  div gt   lt div class  left  gt baz lt  div gt

User · Answer

I know people say this is a terrible idea  but it can in practice be useful if you want to do something like tile images with comments underneath them   e g  Picasaweb uses it to display the thumbnails in an album  See for example demo http   closure-library googlecode com svn trunk closure goog demos inline block quirks html   class goog-inline-block   I abbreviate it to ib here       below is a set of hacks to make inline-block work right on divs in IE     html  gt  body  ib   display inline-block     ib  display inline-block position relative     html  ib   display  inline     first-child   html  ib   display inline      Given that CSS  set your div to class ib  and now it s magically an inline block element

User · Answer

lt div gt foo lt  div gt  lt div gt bar lt  div gt  lt div gt baz lt  div gt    solution 1  lt style gt       div01   div02   div03                                   float left                                  width 2              lt  style gt    lt div id  div01  gt foo lt  div gt  lt div id  div02  gt bar lt  div gt  lt div id  div03  gt baz lt  div gt      solution 2    lt style gt         div01   div02   div03                                     display inline                                    padding-left 5px              lt  style gt   lt div id  div01  gt foo lt  div gt  lt div id  div02  gt bar lt  div gt  lt div id  div03  gt baz lt  div gt       I think this would help but if you have any other thoughts just let me knw      kk

User · Answer

That s something else then    x000D   x000D  div inline   float left    x000D   clearBoth   clear both    x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt br class  clearBoth    gt  lt  -- you may or may not need this -- gt  x000D   x000D   x000D

User · Answer

Try writing it like this    x000D   x000D  div   border  1px solid  CCC    x000D       lt div style  display  inline  gt a lt  div gt  x000D       lt div style  display  inline  gt b lt  div gt  x000D       lt div style  display  inline  gt c lt  div gt  x000D   x000D   x000D

User · Answer

Just use a wrapper div with  float  left  and put boxes inside also containing float  left   CSS   wrapperline  width  300px  float  left  height  60px  background-color  CCCCCC     boxinside  width  50px  float  left  height  50px  margin  5px  background-color  9C0  float left     HTML    lt div class  wrapperline  gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt  div gt

User · Answer

That s something else then    x000D   x000D  div inline   float left    x000D   clearBoth   clear both    x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt br class  clearBoth    gt  lt  -- you may or may not need this -- gt  x000D   x000D   x000D

User · Answer

lt div class  cdiv  gt   lt div class  inline  gt  lt p gt para 1 lt  p gt  lt  div gt    lt div class  inline  gt        lt p gt para 1 lt  p gt        lt span gt para 2 lt  span gt        lt h1 gt para 3 lt  h1 gt   lt  div gt    lt div class  inline  gt  lt p gt para 1 lt  p gt  lt  div gt      http   jsfiddle net f8L0y5wx

User · Answer

I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page  Also  float

User · Answer

Having read this question and the answers a couple of times  all I can do is assume that there s been quite a bit of editing going on  and my suspicion is that you ve been given the incorrect answer based on not providing enough information  My clue comes from the use of br tag   Apologies to Darryl  I read class  inline  as style  display  inline   You have the right answer  even if you do use semantically questionable class names  -    The miss use of br to provide structural layout rather than for textual layout is far too prevalent for my liking    If you re wanting to put more than inline elements inside those divs then you should be floating those divs rather than making them inline   Floated divs                                                                                                                                                                                                                    Inline divs                                                                                                        If you re after the former  then this is your solution and lose those br tags    lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt   lt div style  float  left    gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt     lt p gt block level content or  lt span gt inline content lt  span gt   lt  p gt   lt  div gt    note that the width of these divs is fluid  so feel free to put widths on them if you want to control the behavior   Thanks  Steve

User · Answer

I would use spans or float the div left  The only problem with floating is that you have to clear the float afterwards or the containing div must have the overflow style set to auto

User · Answer

I just tend to make them fixed widths so that they add up to the total width of the page - probably only works if you are using a fixed width page  Also  float

User · Answer

That s something else then    x000D   x000D  div inline   float left    x000D   clearBoth   clear both    x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt br class  clearBoth    gt  lt  -- you may or may not need this -- gt  x000D   x000D   x000D

User · Answer

lt style type  text css  gt  div inline   display inline     lt  style gt   lt div class  inline  gt a lt  div gt   lt div class  inline  gt b lt  div gt   lt div class  inline  gt c lt  div gt

User · Answer

lt span gt

User · Answer

As mentioned  display inline is probably what you want   Some browsers also support inline-blocks     http   www quirksmode org css display html inlineblock

User · Answer

You need to contain the three divs  Here is an example   CSS  div contain     margin 3     border  none    height  auto    width  auto    float  left     div contain div     display inline    width 200px    height 300px    padding  15px    margin  auto    border 1px solid red    background-color  fffff7    -moz-border-radius 25px     Firefox      border-radius 25px      Note  border-radius attributes are optional and only work in CSS3 compliant browsers   HTML   lt div class  contain  gt     lt div gt Foo lt  div gt   lt  div gt    lt div class  contain  gt     lt div gt Bar lt  div gt   lt  div gt    lt div class  contain  gt     lt div gt Baz lt  div gt   lt  div gt    Note that the divs  foo   bar  and  baz  are each held within the  contain  div

User · Answer

An inline div is a freak of the web  amp  should be beaten until it becomes a span  at least 9 times out of 10       lt span gt foo lt  span gt   lt span gt bar lt  span gt   lt span gt baz lt  span gt       answers the original question

User · Answer

lt span gt

User · Answer

Use display inline-block with a margin and media query for IE6 7    lt html gt     lt head gt       lt style gt        div   display inline-block             IE6-7           media                        div   display  inline  margin-right 10px                    lt  style gt     lt  head gt     lt div gt foo lt  div gt     lt div gt bar lt  div gt     lt div gt baz lt  div gt   lt  html gt

User · Answer

lt div gt foo lt  div gt  lt div gt bar lt  div gt  lt div gt baz lt  div gt    solution 1  lt style gt       div01   div02   div03                                   float left                                  width 2              lt  style gt    lt div id  div01  gt foo lt  div gt  lt div id  div02  gt bar lt  div gt  lt div id  div03  gt baz lt  div gt      solution 2    lt style gt         div01   div02   div03                                     display inline                                    padding-left 5px              lt  style gt   lt div id  div01  gt foo lt  div gt  lt div id  div02  gt bar lt  div gt  lt div id  div03  gt baz lt  div gt       I think this would help but if you have any other thoughts just let me knw      kk

User · Answer

I would use spans or float the div left  The only problem with floating is that you have to clear the float afterwards or the containing div must have the overflow style set to auto

User · Answer

lt style type  text css  gt  div inline   display inline     lt  style gt   lt div class  inline  gt a lt  div gt   lt div class  inline  gt b lt  div gt   lt div class  inline  gt c lt  div gt

User · Answer

As mentioned  display inline is probably what you want   Some browsers also support inline-blocks     http   www quirksmode org css display html inlineblock

User · Answer

lt div class  cdiv  gt   lt div class  inline  gt  lt p gt para 1 lt  p gt  lt  div gt    lt div class  inline  gt        lt p gt para 1 lt  p gt        lt span gt para 2 lt  span gt        lt h1 gt para 3 lt  h1 gt   lt  div gt    lt div class  inline  gt  lt p gt para 1 lt  p gt  lt  div gt      http   jsfiddle net f8L0y5wx

User · Answer

ok  for me      lt style type  text css  gt      div          position  relative          display  inline-block          width 25px          height 25px         lt  style gt   lt div gt toto lt  div gt   lt div gt toto lt  div gt   lt div gt toto lt  div gt

User · Answer

I think you can use this way without using any css -    lt table gt       lt tr gt           lt td gt foo lt  td gt       lt  tr gt       lt tr gt           lt td gt bar lt  td gt       lt  tr gt       lt tr gt           lt td gt baz lt  td gt       lt  tr gt   lt  table gt    Right now you are using block level element that way you are getting unwanted result  So you can you inline element like span  small etc    lt span gt foo lt  span gt  lt span gt bar lt  span gt  lt span gt baz lt  span gt

User · Answer

That s something else then    x000D   x000D  div inline   float left    x000D   clearBoth   clear both    x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt div class  inline  gt 1 lt br   gt 2 lt br   gt 3 lt  div gt  x000D   lt br class  clearBoth    gt  lt  -- you may or may not need this -- gt  x000D   x000D   x000D

User · Answer

I think you can use this way without using any css -    lt table gt       lt tr gt           lt td gt foo lt  td gt       lt  tr gt       lt tr gt           lt td gt bar lt  td gt       lt  tr gt       lt tr gt           lt td gt baz lt  td gt       lt  tr gt   lt  table gt    Right now you are using block level element that way you are getting unwanted result  So you can you inline element like span  small etc    lt span gt foo lt  span gt  lt span gt bar lt  span gt  lt span gt baz lt  span gt

User · Answer

Just use a wrapper div with  float  left  and put boxes inside also containing float  left   CSS   wrapperline  width  300px  float  left  height  60px  background-color  CCCCCC     boxinside  width  50px  float  left  height  50px  margin  5px  background-color  9C0  float left     HTML    lt div class  wrapperline  gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt div class  boxinside  gt Box 1 lt  div gt   lt  div gt

User · Answer

we can do this like   left       float left      margin 3px     lt div class  left  gt foo lt  div gt   lt div class  left  gt bar lt  div gt   lt div class  left  gt baz lt  div gt

User · Answer

Try writing it like this    x000D   x000D  div   border  1px solid  CCC    x000D       lt div style  display  inline  gt a lt  div gt  x000D       lt div style  display  inline  gt b lt  div gt  x000D       lt div style  display  inline  gt c lt  div gt  x000D   x000D   x000D

User · Answer

An inline div is a freak of the web  amp  should be beaten until it becomes a span  at least 9 times out of 10       lt span gt foo lt  span gt   lt span gt bar lt  span gt   lt span gt baz lt  span gt       answers the original question

[css] How do you make div elements display inline?

Examples related to css

Examples related to line

Examples related to html