79

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
  • 5,849
  • 13
  • 56
  • 87
Zach Smith
  • 5,168
  • 25
  • 77
  • 122

6 Answers6

124

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
  • 145,946
  • 169
  • 443
  • 600
  • 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
48

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,055
  • 2
  • 22
  • 51
  • 7
    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
13

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

Kyle
  • 63,222
  • 27
  • 141
  • 151
  • 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
11

The easiest is:

width: fit-content;

fruitloaf
  • 604
  • 7
  • 5
3

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

Maggyero
  • 4,569
  • 3
  • 30
  • 49
eliram9
  • 29
  • 3
2

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
  • 76,631
  • 25
  • 162
  • 208