Is there a css cross-browser value for "width: -moz-fit-content;"?

Question

I need some divs to be center-positioned and to fit their content width at the same time.

I am now doing it like this:

.mydiv-centerer{

  text-align: center;

  .mydiv {
    background: none no-repeat scroll 0 0 rgba(1, 56, 110, 0.7);
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px #0099FF;
    color: white;
    margin: 10px auto;
    padding: 10px;
    text-align: justify;
    width: -moz-fit-content;
  }
}

Now, the last command "width: -moz-fit-content;" is exactly what I need!

Only problem is.. it works only on Firefox.

I also tryed with "display:inline-block;", but I need these divs to behave like divs. Namely, every next div should be under, and not inline, the previous.

Do you know any possible cross-browser solution?

Solution 1

At last I fixed it simply using:

display: table;

Solution 2

Mozilla's MDN suggests something like the following [source]:

 p {
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
}

Solution 3

In similar case I used: white-space: nowrap;

Solution 4

Is there a single declaration that fixes this for Webkit, Gecko, and Blink? No. However, there is a cross-browser solution by specifying multiple width property values that correspond to each layout engine's convention.

.mydiv {  
  ...
  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */
  ...
}

Adapted from: MDN

Solution 5

width: intrinsic;           /* Safari/WebKit uses a non-standard name */
width: -moz-max-content;    /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */

View more solutions