How can I make a div not larger than its contents

Question

I have a layout similar to    lt div gt       lt table gt       lt  table gt   lt  div gt    I would like for the div to only expand to as wide as my table becomes

User · Answer

x000D   x000D  div  width fit-content    x000D   lt div gt       lt table gt       lt  table gt   lt  div gt  x000D   x000D   x000D

User · Answer

I think using  display  inline-block    would work  however I m not sure about the browser compatibility     Another solution would be to wrap your div in another div  if you want to maintain the block behavior    HTML    lt div gt       lt div class  yourdiv  gt          content      lt  div gt   lt  div gt    CSS    yourdiv       display  inline

User · Answer

Personnaly  I simply do this     HTML code     lt div gt       lt table gt       lt  table gt   lt  div gt    CSS code    div       display  inline      If you apply a float on your div  it works too but obviously  you need to apply a  clear both  CSS rules at the next HTML element

User · Answer

I think using  display  inline-block    would work  however I m not sure about the browser compatibility     Another solution would be to wrap your div in another div  if you want to maintain the block behavior    HTML    lt div gt       lt div class  yourdiv  gt          content      lt  div gt   lt  div gt    CSS    yourdiv       display  inline

User · Answer

Not knowing in what context this will appear  but I believe the CSS-style property float either left or right will have this effect  On the other hand  it ll have other side effects as well  such as allowing text to float around it   Please correct me if I m wrong though  I m not 100  sure  and currently can t test it myself

User · Answer

lt table cellpadding  0  cellspacing  0  border  0  gt       lt tr gt           lt td gt               lt div id  content lalala  gt                  this content inside the div being inside a table  needs no inline properties and the table is the one expanding to the content of this div                 lt  div gt           lt  td gt       lt  tr gt   lt  table gt    I know people don t like tables sometimes  but I gotta tell you  I tried the css inline hacks  and they kinda worked in some divs but in others didn t  so  it was really just easier to enclose the expanding div in a table   and   it can have or not the inline property and still the table is the one that s gonna hold the total width of the content

User · Answer

I tried div classname display table-cell   and it worked

User · Answer

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing  In CSS2  shrink-to-fit is not a goal  but means to deal with a situation where browser  has to  get a width out of thin air  Those situations are     float   absolutely positioned element inline-block element table element   when there are no width specified  I heard they think of adding what you want in CSS3  For now  make do with one of the above   The decision not to expose the feature directly may seem strange  but there is a good reason  It is expensive  Shrink-to-fit means formatting at least twice  you cannot start formatting an element until you know its width  and you cannot calculate the width w o going through entire content  Plus  one does not need shrink-to-fit element as often as one may think  Why do you need extra div around your table  Maybe table caption is all you need

User · Answer

Simply   lt div style  display  inline   gt       lt table gt       lt  table gt   lt  div gt

User · Answer

What works for me is   display  table    in the div   Tested on Firefox and Google Chrome

User · Answer

You can use inline-block as  user473598  but beware of older browsers       Your re working with    display  inline-block      For IE 7    zoom  1   display  inline      For Mozilla Firefox  lt  3 0    display -moz-inline-stack    Mozilla doesn   t support inline-block at all  but they have -moz-inline-stack which is about the same  Some cross-browser around inline-block display attribute  https   css-tricks com snippets css cross-browser-inline-block   You can see some tests with this attribute in  https   robertnyman com 2010 02 24 css-display-inline-block-why-it-rocks-and-why-it-sucks

User · Answer

There are two better solutions    display  inline-block   OR display  table    Out of these two display table  is better  because display  inline-block  adds an extra margin   For display inline-block  you can use the negative margin method to fix the extra space

User · Answer

lt div class  parentDiv  style  display inline-block  gt         HTML elements  lt  div gt    This will make parent div width same as the largest element width

User · Answer

width 1px  white-space  nowrap    works fine for me

User · Answer

An working demo is here-   x000D   x000D   floating-box   x000D      display -moz-inline-stack  x000D      display  inline-block  x000D   x000D      width  fit-content   x000D      height  fit-content  x000D   x000D      width  150px  x000D      height  75px  x000D      margin  10px  x000D      border  3px solid  73AD21    x000D    x000D   lt h2 gt The Way is using inline-block lt  h2 gt  x000D   x000D  Supporting elements are also added in CSS  x000D   x000D   lt div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The answer for your question lays in the future my friend      namely  intrinsic  is coming with the latest CSS3 update  width  intrinsic    unfortunately IE is behind with it so it doesn t support it yet   More about it  CSS Intrinsic  amp  Extrinsic Sizing Module Level 3 and Can I Use   Intrinsic  amp  Extrinsic Sizing    For now you have to be satisfied with  lt span gt  or  lt div gt  set to   display  inline-block

User · Answer

What works for me is   display  table    in the div   Tested on Firefox and Google Chrome

User · Answer

A CSS2 compatible solution is to use    my-div       min-width  100px      You can also float your div which will force it as small as possible  but you ll need to use a clearfix if anything inside your div is floating    my-div       float  left

User · Answer

There are two better solutions    display  inline-block   OR display  table    Out of these two display table  is better  because display  inline-block  adds an extra margin   For display inline-block  you can use the negative margin method to fix the extra space

User · Answer

display  inline-block adds an extra margin to your element   I would recommend this    element       display  table     IE8  and all other modern browsers        Bonus  You can also now easily center that fancy new  element just by adding margin  0 auto

User · Answer

I ve a span inside a div and just setting margin  auto to the container div worked for me

User · Answer

The answer for your question lays in the future my friend      namely  intrinsic  is coming with the latest CSS3 update  width  intrinsic    unfortunately IE is behind with it so it doesn t support it yet   More about it  CSS Intrinsic  amp  Extrinsic Sizing Module Level 3 and Can I Use   Intrinsic  amp  Extrinsic Sizing    For now you have to be satisfied with  lt span gt  or  lt div gt  set to   display  inline-block

User · Answer

Try display  inline-block   For it to be cross browser compatible please use the below css code    x000D   x000D  div   x000D    display  inline-block  x000D    display -moz-inline-stack  x000D    zoom 1  x000D     display inline  x000D    border-style  solid  x000D    border-color   0000ff  x000D    x000D   lt div gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt Column1 lt  td gt  x000D         lt td gt Column2 lt  td gt  x000D         lt td gt Column3 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Not knowing in what context this will appear  but I believe the CSS-style property float either left or right will have this effect  On the other hand  it ll have other side effects as well  such as allowing text to float around it   Please correct me if I m wrong though  I m not 100  sure  and currently can t test it myself

User · Answer

If you have containers breaking lines  after hours looking for a good CSS solution and finding none  I now use jQuery instead    x000D   x000D     button   click function    x000D   x000D       nav ul   each function    x000D       x000D       parent     this  parent    x000D       x000D       parent width    this  width      x000D       x000D        x000D      x000D  nav   x000D    display  inline-block  x000D    text-align  left     doesn t do anything  unlike some might guess    x000D    x000D  ul   x000D    display  inline  x000D    x000D   x000D     needed style    x000D  ul   x000D    padding  0  x000D    x000D  body   x000D    width  420px  x000D    x000D   x000D     just style    x000D  body   x000D    background   ddd  x000D    margin  1em auto  x000D    x000D  button   x000D    display  block  x000D    x000D  nav   x000D    background   bbb  x000D    margin  1rem auto  x000D    padding  0 5rem  x000D    x000D  li   x000D    display  inline-block  x000D    width  40px  x000D    height  20px  x000D    border  solid thin  777  x000D    margin  4px  x000D    background   999  x000D    text-align  center  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button gt fix lt  button gt  x000D   x000D   lt nav gt  x000D     lt ul gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt   lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 4 lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   lt nav gt  x000D     lt ul gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt   lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 4 lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D       lt li gt 9 lt  li gt  x000D       lt li gt 2 lt  li gt  x000D       lt li gt 6 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

I would just set padding  -whateverYouWantpx

User · Answer

We can use any of the two ways on the div element      display  table    or   display  inline-block     I prefer to use display  table   because it handles  all extra spaces on its own  While display  inline-block needs some extra space fixing

User · Answer

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing  In CSS2  shrink-to-fit is not a goal  but means to deal with a situation where browser  has to  get a width out of thin air  Those situations are     float   absolutely positioned element inline-block element table element   when there are no width specified  I heard they think of adding what you want in CSS3  For now  make do with one of the above   The decision not to expose the feature directly may seem strange  but there is a good reason  It is expensive  Shrink-to-fit means formatting at least twice  you cannot start formatting an element until you know its width  and you cannot calculate the width w o going through entire content  Plus  one does not need shrink-to-fit element as often as one may think  Why do you need extra div around your table  Maybe table caption is all you need

User · Answer

An working demo is here-   x000D   x000D   floating-box   x000D      display -moz-inline-stack  x000D      display  inline-block  x000D   x000D      width  fit-content   x000D      height  fit-content  x000D   x000D      width  150px  x000D      height  75px  x000D      margin  10px  x000D      border  3px solid  73AD21    x000D    x000D   lt h2 gt The Way is using inline-block lt  h2 gt  x000D   x000D  Supporting elements are also added in CSS  x000D   x000D   lt div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D      lt div class  floating-box  gt Floating box lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

OK  in many cases you even don t need to do anything as by default div has height and width as auto  but if it s not your case  applying inline-block display gonna work for you    look at the code I create for you and it s do what you looking for    x000D   x000D  div   x000D    display  inline-block  x000D    x000D   lt div gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi ultrices feugiat massa sed laoreet  Maecenas et magna egestas  facilisis purus quis  vestibulum nibh  lt  td gt  x000D         lt td gt Nunc auctor aliquam est ac viverra  Sed enim nisi  feugiat sed accumsan eu  convallis eget felis  Pellentesque consequat eu leo nec pharetra  Aenean interdum enim dapibus diam  lt  td gt  x000D         lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi ultrices feugiat massa sed laoreet  Maecenas et magna egestas  facilisis purus quis  vestibulum nibh  lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can do it simply by using display  inline   or white-space  nowrap      I hope you find this useful

User · Answer

Try display  inline-block   For it to be cross browser compatible please use the below css code    x000D   x000D  div   x000D    display  inline-block  x000D    display -moz-inline-stack  x000D    zoom 1  x000D     display inline  x000D    border-style  solid  x000D    border-color   0000ff  x000D    x000D   lt div gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt Column1 lt  td gt  x000D         lt td gt Column2 lt  td gt  x000D         lt td gt Column3 lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

What if we define a global variable and use that for both    x000D   x000D   root   x000D      --table-width  400px  x000D    x000D   x000D   container  x000D       width var --table-width   x000D       border  1px solid black       easy visualization x000D    x000D   inner-table   x000D       width var --table-width   x000D       border  1px solid red       easy visualization x000D    x000D   lt div class  container  gt  x000D       lt table class  inner-table  gt  x000D          lt tr gt  x000D              lt td gt abc lt  td gt  x000D          lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing  In CSS2  shrink-to-fit is not a goal  but means to deal with a situation where browser  has to  get a width out of thin air  Those situations are     float   absolutely positioned element inline-block element table element   when there are no width specified  I heard they think of adding what you want in CSS3  For now  make do with one of the above   The decision not to expose the feature directly may seem strange  but there is a good reason  It is expensive  Shrink-to-fit means formatting at least twice  you cannot start formatting an element until you know its width  and you cannot calculate the width w o going through entire content  Plus  one does not need shrink-to-fit element as often as one may think  Why do you need extra div around your table  Maybe table caption is all you need

User · Answer

You can use height  100  and width for your choice  This makes the div not larger than its content

User · Answer

This seems to work fine for me on all browsers  Example is an actual ad i use online and in newsletter  Just change the content of the div  It will adjust and shrinkwrap with the amount of padding you specify    lt div style  float left  border  3px ridge red  background  aqua  padding 12px  gt       lt font color red size 4 gt Need to fix a birth certificate  Learn  lt a href  http   www example com  gt Photoshop in a Day lt  a gt        lt  font gt   lt  div gt

User · Answer

width 1px  white-space  nowrap    works fine for me

User · Answer

Try to use width  max-content property to adjust the width of the div by it s content size  Try this example   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  div ex1     width 500px    margin  auto    border  3px solid  73AD21     div ex2     width  max-content    margin  auto    border  3px solid  73AD21     lt  style gt   lt  head gt   lt body gt    lt div class  quot ex1 quot  gt This div element has width 500px  lt  div gt   lt br gt   lt div class  quot ex2 quot  gt Width by content size lt  div gt    lt  body gt   lt  html gt

User · Answer

A CSS2 compatible solution is to use    my-div       min-width  100px      You can also float your div which will force it as small as possible  but you ll need to use a clearfix if anything inside your div is floating    my-div       float  left

User · Answer

Just put a style into your CSS file  div        width  fit-content

User · Answer

x000D   x000D  div  width fit-content    x000D   lt div gt       lt table gt       lt  table gt   lt  div gt  x000D   x000D   x000D

User · Answer

I ve a span inside a div and just setting margin  auto to the container div worked for me

User · Answer

You can try this code  Follow the code in the CSS section    x000D   x000D  div   x000D    display  inline-block  x000D    padding  2vw  x000D    background-color  green  x000D    x000D   x000D  table   x000D    width  70vw  x000D    background-color  white  x000D    x000D   lt div gt  x000D       lt table border  colapsed  gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D   x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt table cellpadding  0  cellspacing  0  border  0  gt       lt tr gt           lt td gt               lt div id  content lalala  gt                  this content inside the div being inside a table  needs no inline properties and the table is the one expanding to the content of this div                 lt  div gt           lt  td gt       lt  tr gt   lt  table gt    I know people don t like tables sometimes  but I gotta tell you  I tried the css inline hacks  and they kinda worked in some divs but in others didn t  so  it was really just easier to enclose the expanding div in a table   and   it can have or not the inline property and still the table is the one that s gonna hold the total width of the content

User · Answer

What if we define a global variable and use that for both    x000D   x000D   root   x000D      --table-width  400px  x000D    x000D   x000D   container  x000D       width var --table-width   x000D       border  1px solid black       easy visualization x000D    x000D   inner-table   x000D       width var --table-width   x000D       border  1px solid red       easy visualization x000D    x000D   lt div class  container  gt  x000D       lt table class  inner-table  gt  x000D          lt tr gt  x000D              lt td gt abc lt  td gt  x000D          lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A CSS2 compatible solution is to use    my-div       min-width  100px      You can also float your div which will force it as small as possible  but you ll need to use a clearfix if anything inside your div is floating    my-div       float  left

User · Answer

div    width auto    height auto

User · Answer

You want a block element that has what CSS calls shrink-to-fit width and the spec does not provide a blessed way to get such a thing  In CSS2  shrink-to-fit is not a goal  but means to deal with a situation where browser  has to  get a width out of thin air  Those situations are     float   absolutely positioned element inline-block element table element   when there are no width specified  I heard they think of adding what you want in CSS3  For now  make do with one of the above   The decision not to expose the feature directly may seem strange  but there is a good reason  It is expensive  Shrink-to-fit means formatting at least twice  you cannot start formatting an element until you know its width  and you cannot calculate the width w o going through entire content  Plus  one does not need shrink-to-fit element as often as one may think  Why do you need extra div around your table  Maybe table caption is all you need

User · Answer

The solution is to set your div to display  inline-block

User · Answer

Tampering around with Firebug I found the property value -moz-fit-content which exactly does what the OP wanted and could be used as follow   width  -moz-fit-content    Although it only works on Firefox  I couldn t find any equivalent for other browsers such as Chrome

User · Answer

You can try fit-content  CSS3     div     width  fit-content        To adjust the height as well       height  fit-content       Browser support Specification

User · Answer

Not knowing in what context this will appear  but I believe the CSS-style property float either left or right will have this effect  On the other hand  it ll have other side effects as well  such as allowing text to float around it   Please correct me if I m wrong though  I m not 100  sure  and currently can t test it myself

User · Answer

Try to use width  max-content property to adjust the width of the div by it s content size  Try this example   lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  div ex1     width 500px    margin  auto    border  3px solid  73AD21     div ex2     width  max-content    margin  auto    border  3px solid  73AD21     lt  style gt   lt  head gt   lt body gt    lt div class  quot ex1 quot  gt This div element has width 500px  lt  div gt   lt br gt   lt div class  quot ex2 quot  gt Width by content size lt  div gt    lt  body gt   lt  html gt

User · Answer

div    width auto    height auto

User · Answer

This seems to work fine for me on all browsers  Example is an actual ad i use online and in newsletter  Just change the content of the div  It will adjust and shrinkwrap with the amount of padding you specify    lt div style  float left  border  3px ridge red  background  aqua  padding 12px  gt       lt font color red size 4 gt Need to fix a birth certificate  Learn  lt a href  http   www example com  gt Photoshop in a Day lt  a gt        lt  font gt   lt  div gt

User · Answer

This has been mentioned in comments and is hard to find in one of the answers so   If you are using display  flex for whatever reason  you can instead use   div       display  inline-flex      This is also widely supported across browsers

User · Answer

Revised  works if you have multiple children   You can use jQuery  Look at the JSFiddle link   var d     div    var w    d children   each function     w   w     this  outerWidth     d css  width   w    px         Do not forget to include the jQuery      See the JSfiddle here

User · Answer

I tried div classname display table-cell   and it worked

User · Answer

You can try fit-content  CSS3     div     width  fit-content        To adjust the height as well       height  fit-content       Browser support Specification

User · Answer

You can try this code  Follow the code in the CSS section    x000D   x000D  div   x000D    display  inline-block  x000D    padding  2vw  x000D    background-color  green  x000D    x000D   x000D  table   x000D    width  70vw  x000D    background-color  white  x000D    x000D   lt div gt  x000D       lt table border  colapsed  gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt Apple lt  td gt  x000D           lt td gt Banana lt  td gt  x000D           lt td gt Strawberry lt  td gt  x000D         lt  tr gt  x000D   x000D       lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

OK  in many cases you even don t need to do anything as by default div has height and width as auto  but if it s not your case  applying inline-block display gonna work for you    look at the code I create for you and it s do what you looking for    x000D   x000D  div   x000D    display  inline-block  x000D    x000D   lt div gt  x000D     lt table gt  x000D       lt tr gt  x000D         lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi ultrices feugiat massa sed laoreet  Maecenas et magna egestas  facilisis purus quis  vestibulum nibh  lt  td gt  x000D         lt td gt Nunc auctor aliquam est ac viverra  Sed enim nisi  feugiat sed accumsan eu  convallis eget felis  Pellentesque consequat eu leo nec pharetra  Aenean interdum enim dapibus diam  lt  td gt  x000D         lt td gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Morbi ultrices feugiat massa sed laoreet  Maecenas et magna egestas  facilisis purus quis  vestibulum nibh  lt  td gt  x000D       lt  tr gt  x000D     lt  table gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

display  -moz-inline-stack  display  inline-block  zoom  1   display  inline    Foo Hack     Cross Browser Support for inline-block Styling  2007-11-19

User · Answer

You can use height  100  and width for your choice  This makes the div not larger than its content

User · Answer

Not knowing in what context this will appear  but I believe the CSS-style property float either left or right will have this effect  On the other hand  it ll have other side effects as well  such as allowing text to float around it   Please correct me if I m wrong though  I m not 100  sure  and currently can t test it myself

User · Answer

My CSS3 flexbox solution in two flavors  The one on top behaves like a span and the one at the bottom behaves like a div  taking all the width with the help of a wrapper  Their classes are  top    bottom  and  bottomwrapper  respectively    x000D   x000D  body   x000D      font-family  sans-serif  x000D    x000D   top   x000D      display  -webkit-inline-flex  x000D      display  inline-flex  x000D    x000D   top   bottom   x000D      background-color   3F3  x000D      border  2px solid  FA6  x000D    x000D     bottomwrapper will take the rest of the width    x000D   bottomwrapper   x000D      display  -webkit-flex  x000D      display  flex  x000D    x000D  table   x000D      border-collapse  collapse  x000D    x000D  table  th  td   x000D      width  280px  x000D      border  1px solid  666  x000D    x000D  th   x000D      background-color   282  x000D      color   FFF  x000D    x000D  td   x000D      color   444  x000D    x000D  th  td   x000D      padding  0 4px 0 4px  x000D    x000D  Is this x000D   lt div class  top  gt  x000D    lt table gt  x000D           lt tr gt  x000D               lt th gt OS lt  th gt  x000D               lt th gt Version lt  th gt   x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt OpenBSD lt  td gt  x000D               lt td gt 5 7 lt  td gt   x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Windows lt  td gt  x000D               lt td gt Please upgrade to 10  lt  td gt   x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D  what you are looking for  x000D   lt br gt  x000D  Or may be    x000D   lt div class  bottomwrapper  gt  x000D       lt div class  bottom  gt  x000D        lt table gt  x000D               lt tr gt  x000D                   lt th gt OS lt  th gt  x000D                   lt th gt Version lt  th gt   x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt OpenBSD lt  td gt  x000D                   lt td gt 5 7 lt  td gt   x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Windows lt  td gt  x000D                   lt td gt Please upgrade to 10  lt  td gt   x000D               lt  tr gt  x000D           lt  table gt  x000D       lt  div gt  x000D   lt  div gt  x000D  this is what you are looking for  x000D   x000D   x000D

User · Answer

Just put a style into your CSS file  div        width  fit-content

User · Answer

If you have containers breaking lines  after hours looking for a good CSS solution and finding none  I now use jQuery instead    x000D   x000D     button   click function    x000D   x000D       nav ul   each function    x000D       x000D       parent     this  parent    x000D       x000D       parent width    this  width      x000D       x000D        x000D      x000D  nav   x000D    display  inline-block  x000D    text-align  left     doesn t do anything  unlike some might guess    x000D    x000D  ul   x000D    display  inline  x000D    x000D   x000D     needed style    x000D  ul   x000D    padding  0  x000D    x000D  body   x000D    width  420px  x000D    x000D   x000D     just style    x000D  body   x000D    background   ddd  x000D    margin  1em auto  x000D    x000D  button   x000D    display  block  x000D    x000D  nav   x000D    background   bbb  x000D    margin  1rem auto  x000D    padding  0 5rem  x000D    x000D  li   x000D    display  inline-block  x000D    width  40px  x000D    height  20px  x000D    border  solid thin  777  x000D    margin  4px  x000D    background   999  x000D    text-align  center  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt button gt fix lt  button gt  x000D   x000D   lt nav gt  x000D     lt ul gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt   lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 4 lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   lt nav gt  x000D     lt ul gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt   lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 4 lt  li gt  x000D       lt li gt 1 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D       lt li gt 9 lt  li gt  x000D       lt li gt 2 lt  li gt  x000D       lt li gt 6 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D       lt li gt 3 lt  li gt  x000D       lt li gt 5 lt  li gt  x000D     lt  ul gt  x000D   lt  nav gt  x000D   x000D   x000D

User · Answer

display  -moz-inline-stack  display  inline-block  zoom  1   display  inline    Foo Hack     Cross Browser Support for inline-block Styling  2007-11-19

User · Answer

A CSS2 compatible solution is to use    my-div       min-width  100px      You can also float your div which will force it as small as possible  but you ll need to use a clearfix if anything inside your div is floating    my-div       float  left

User · Answer

The solution is to set your div to display  inline-block

User · Answer

I have solved a similar problem  where I didn t want to use display  inline-block because the item was centered  by adding a span tag inside the div tag  and moving the CSS formatting from the outer div tag to the new inner span tag  Just throwing this out there as another alternative idea if display  inline block isn t a suitable answer for you

User · Answer

Simply   lt div style  display  inline   gt       lt table gt       lt  table gt   lt  div gt

User · Answer

I think using  display  inline-block    would work  however I m not sure about the browser compatibility     Another solution would be to wrap your div in another div  if you want to maintain the block behavior    HTML    lt div gt       lt div class  yourdiv  gt          content      lt  div gt   lt  div gt    CSS    yourdiv       display  inline

User · Answer

lt div class  parentDiv  style  display inline-block  gt         HTML elements  lt  div gt    This will make parent div width same as the largest element width

User · Answer

You can do it simply by using display  inline   or white-space  nowrap      I hope you find this useful

User · Answer

This has been mentioned in comments and is hard to find in one of the answers so   If you are using display  flex for whatever reason  you can instead use   div       display  inline-flex      This is also widely supported across browsers

User · Answer

My CSS3 flexbox solution in two flavors  The one on top behaves like a span and the one at the bottom behaves like a div  taking all the width with the help of a wrapper  Their classes are  top    bottom  and  bottomwrapper  respectively    x000D   x000D  body   x000D      font-family  sans-serif  x000D    x000D   top   x000D      display  -webkit-inline-flex  x000D      display  inline-flex  x000D    x000D   top   bottom   x000D      background-color   3F3  x000D      border  2px solid  FA6  x000D    x000D     bottomwrapper will take the rest of the width    x000D   bottomwrapper   x000D      display  -webkit-flex  x000D      display  flex  x000D    x000D  table   x000D      border-collapse  collapse  x000D    x000D  table  th  td   x000D      width  280px  x000D      border  1px solid  666  x000D    x000D  th   x000D      background-color   282  x000D      color   FFF  x000D    x000D  td   x000D      color   444  x000D    x000D  th  td   x000D      padding  0 4px 0 4px  x000D    x000D  Is this x000D   lt div class  top  gt  x000D    lt table gt  x000D           lt tr gt  x000D               lt th gt OS lt  th gt  x000D               lt th gt Version lt  th gt   x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt OpenBSD lt  td gt  x000D               lt td gt 5 7 lt  td gt   x000D           lt  tr gt  x000D           lt tr gt  x000D               lt td gt Windows lt  td gt  x000D               lt td gt Please upgrade to 10  lt  td gt   x000D           lt  tr gt  x000D       lt  table gt  x000D   lt  div gt  x000D  what you are looking for  x000D   lt br gt  x000D  Or may be    x000D   lt div class  bottomwrapper  gt  x000D       lt div class  bottom  gt  x000D        lt table gt  x000D               lt tr gt  x000D                   lt th gt OS lt  th gt  x000D                   lt th gt Version lt  th gt   x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt OpenBSD lt  td gt  x000D                   lt td gt 5 7 lt  td gt   x000D               lt  tr gt  x000D               lt tr gt  x000D                   lt td gt Windows lt  td gt  x000D                   lt td gt Please upgrade to 10  lt  td gt   x000D               lt  tr gt  x000D           lt  table gt  x000D       lt  div gt  x000D   lt  div gt  x000D  this is what you are looking for  x000D   x000D   x000D

User · Answer

You could use display  flex for parent element   parentElement      display  flex     flex-direction  column     align-items  flex-start

User · Answer

You could use display  flex for parent element   parentElement      display  flex     flex-direction  column     align-items  flex-start

User · Answer

Tampering around with Firebug I found the property value -moz-fit-content which exactly does what the OP wanted and could be used as follow   width  -moz-fit-content    Although it only works on Firefox  I couldn t find any equivalent for other browsers such as Chrome

User · Answer

I would just set padding  -whateverYouWantpx

User · Answer

I have solved a similar problem  where I didn t want to use display  inline-block because the item was centered  by adding a span tag inside the div tag  and moving the CSS formatting from the outer div tag to the new inner span tag  Just throwing this out there as another alternative idea if display  inline block isn t a suitable answer for you

User · Answer

We can use any of the two ways on the div element      display  table    or   display  inline-block     I prefer to use display  table   because it handles  all extra spaces on its own  While display  inline-block needs some extra space fixing

User · Answer

You can use inline-block as  user473598  but beware of older browsers       Your re working with    display  inline-block      For IE 7    zoom  1   display  inline      For Mozilla Firefox  lt  3 0    display -moz-inline-stack    Mozilla doesn   t support inline-block at all  but they have -moz-inline-stack which is about the same  Some cross-browser around inline-block display attribute  https   css-tricks com snippets css cross-browser-inline-block   You can see some tests with this attribute in  https   robertnyman com 2010 02 24 css-display-inline-block-why-it-rocks-and-why-it-sucks

User · Answer

I think using  display  inline-block    would work  however I m not sure about the browser compatibility     Another solution would be to wrap your div in another div  if you want to maintain the block behavior    HTML    lt div gt       lt div class  yourdiv  gt          content      lt  div gt   lt  div gt    CSS    yourdiv       display  inline

User · Answer

display  inline-block adds an extra margin to your element   I would recommend this    element       display  table     IE8  and all other modern browsers        Bonus  You can also now easily center that fancy new  element just by adding margin  0 auto

User · Answer

Revised  works if you have multiple children   You can use jQuery  Look at the JSFiddle link   var d     div    var w    d children   each function     w   w     this  outerWidth     d css  width   w    px         Do not forget to include the jQuery      See the JSfiddle here

User · Answer

Personnaly  I simply do this     HTML code     lt div gt       lt table gt       lt  table gt   lt  div gt    CSS code    div       display  inline      If you apply a float on your div  it works too but obviously  you need to apply a  clear both  CSS rules at the next HTML element

[html] How can I make a div not larger than its contents?

Examples related to html

Examples related to css

Examples related to width