Reputation: 7083
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
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
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
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
Reputation: 12935
I use these:
.right {display:table; margin:-18px 0 0 auto;}
.center {display:table; margin:-18px auto 0 auto;}
Upvotes: 2
Reputation: 34855
Why not use some br
s?
<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