85

I am trying to make a h2 header for sidebar widgets but I want the width of the div class to be whatever width the content becomes. It seems I can't just set a width because those headlines with longer content then shorter content makes it break.

How can I simply make width stretch/change depending on the length of content there is? Any help would be greatly appreciated.

Rohit
  • 6,365
  • 14
  • 59
  • 90
Zach Smith
  • 5,490
  • 26
  • 84
  • 139

7 Answers7

128

As far as I know, display: inline-block is what you probably need. That will make it seem like it's sort of inline but still allow you to use things like margins and such.

Svish
  • 152,914
  • 173
  • 462
  • 620
  • 3
    but it makes my div 100% in width which is what i don't need – Zach Smith Sep 20 '10 at 14:22
  • @HollerTrain: What browser are you using? Cause it works perfectly here. If I remove your `width` and `text-align`, and adds that `display:inline-block` on `h2.widgettitle`, I get the result you want. – Svish Sep 20 '10 at 18:42
  • 2
    By the way, if I were you, I would run the site through the http://validator.w3.org as well as try to slim it down quite a bit. I do not have a bad internet connection and not a slow computer, but your page took almost 1.5 minutes to load. You have for example some images that are a lot bigger than they need to be; around 200kB each. Install http://getfirebug.com if you haven't, open up its Net tab and reload your page (Ctrl+F5, probably) – Svish Sep 20 '10 at 18:52
  • ah you are right! must have been an issue with Firebug. you saved my day and taught me something (more valuable!) – Zach Smith Sep 20 '10 at 19:26
  • Thanks for the answer, for my submenu I needed to add: `white-space: nowrap;` – Jordy Mar 16 '17 at 09:00
62

If you are coming here, there is high chance width: min-content or width: max-content can fix your problem. This can force an element to use the smallest or largest space the browser could choose…

This is the modern solution. Here is a small tutorial for that.

There is also fit-content, which often works like min-content, but is more flexible. (But also has worse browser support.)

This is a quite new feature and some browsers do not support it yet, but browser support is growing. See the current browser status here.

rugk
  • 4,755
  • 2
  • 28
  • 55
  • 9
    This really should be the correct answer. Its the only answer that solves the problem without creating more problems. Well done and thanks. – PaulG May 12 '19 at 11:11
18

The easiest is:

width: fit-content;

fruitloaf
  • 1,628
  • 15
  • 10
  • Please explain your code to make it more helpful. https://stackoverflow.com/help/how-to-answer – ethry Oct 25 '22 at 22:52
13

If display: inline; isn't working, try out display: inline-block;. :)

Kyle
  • 65,599
  • 28
  • 144
  • 152
  • does using `display:inline` limit me from using `margin-bottom` commands? now that i'm using `display:inline` i can't add bottom margin to it! thoughts? – Zach Smith Sep 20 '10 at 13:02
  • Using just inline does, that's why I suggested using inline-block, this removes that limit.. afaik. – Kyle Sep 20 '10 at 13:25
  • I needed `display: inline-flex;` – Akh Sep 29 '22 at 21:14
4

I faced the same issue and I resolved it by using: max-width: fit-content;

Géry Ogam
  • 6,336
  • 4
  • 38
  • 67
eliram9
  • 39
  • 3
  • Please explain your code to make it more helpful. https://stackoverflow.com/help/how-to-answer – ethry Oct 25 '22 at 22:52
3

The best way to do this is to set display: inline;. Note, however, that in inline display, you lose access to some layout properties, such as manual height and vertical margins, but this doesn't appear to be a problem for your page.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
0
width: -moz-fit-content;
              width: fit-content;
Arbejdsglæde
  • 13,670
  • 26
  • 78
  • 144
  • 3
    Please explain your code to make it more helpful. https://stackoverflow.com/help/how-to-answer – ethry Oct 25 '22 at 22:52