Darme
Darme

Reputation: 7083

Is there a CSS cross-browser alternative to Firefox' "width: -moz-fit-content;"?

I need some divs to fit their content width at the same time.

I am now doing it like this:

.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;
}

The last command "width: -moz-fit-content;" is exactly what I need! The only problem is... it works only on Firefox.

I also tried 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?

Upvotes: 101

Views: 137394

Answers (7)

IS4
IS4

Reputation: 13207

I was looking for a way to prevent a long line of text from outgrowing past its container, and max-width: fit-content worked in Chrome, but not in Firefox.

I found a workaround: if the element is the last displayed subelement, setting display: table-caption; and caption-side: bottom; does have the same effect, together with display: table; on the parent object.

Upvotes: 2

user570605
user570605

Reputation: 768

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

Upvotes: 16

Justin Geeslin
Justin Geeslin

Reputation: 3411

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 */
}

Upvotes: 84

Darme
Darme

Reputation: 7083

At last I fixed it simply using:

display: table;

Upvotes: 192

b_archer
b_archer

Reputation: 317

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

Upvotes: 11

diyism
diyism

Reputation: 12935

I use these:

.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}

Upvotes: 2

Jason Gennaro
Jason Gennaro

Reputation: 34855

Why not use some brs?

<div class="mydiv-centerer">
    <div class="mydiv">Some content</div><br />
    <div class="mydiv">More content than before</div><br />
    <div class="mydiv">Here is a lot of content that
                       I was not anticipating</div>    
</div>

CSS

.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;
    display:inline-block;
}

Example: http://jsfiddle.net/YZV25/

Upvotes: -1

Related Questions