CODEWITHSUNDEEP
htmlcss
user3447980
user3447980

Reputation: 163

IE element width to min-content

I have the following container holding both an image and a text element.

<div class="container">
    <img id="image" src="http://dummyimage.com/200">
    <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

The desired behaviour is that the div should wrap to the width of the image, and therfore keep the text correctly wrapped underneath. This also needs to be flexible as content is dynamic and image width is not known in advance.

You can do this elegantly enough in Firefox and Chrome using min-content. 

.container {
    /*Other style stuff up here*/
    width: -moz-min-content;
    width: -webkit-min-content;
}

Jsfiddle of above - works perfectly in FF and Chrome.

My Problem: Internet Explorer has no min-content (or equivalent that I can find) which means it is the text not the image which determines the containers width.

Is there any similarly elegant way of achieving this in Internet Explorer?

If not how can i restructure the html/css to allow for cross broser compatibilty for the same behaviour?

Upvotes: 16

Views: 19996

Answers (3)

user3664916
user3664916

Reputation: 551

@Stack_of_Pancakes solution is lacking in that it adds an extra div which is a block element and spans the entire width, whereas the original width:min-content doesn't have this flaw. It can be fixed:

HTML: (intact)

<div class="container">
    <img id="image" src="http://dummyimage.com/200" alt="">
    <span class="text">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    </span>
</div>

CSS:

.container {
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
    display: -ms-inline-grid;
    -ms-grid-columns: min-content;
}
.container > span:nth-child(2) 
{
    -ms-grid-row:2;
    display:inline-block;
}

http://jsfiddle.net/L28s7txr/6

Upvotes: 3

Stack of Pancakes
Stack of Pancakes

Reputation: 1921

As mentioned by someone else you can use -ms-grid-columns. You just add a div around your content with IE only CSS. To other browsers the CSS is ignored and shouldn't affect your layout (unless you're applying CSS to all div elements like padding/margin in which case stop doing that).

HTML

<div id="stupidIE">
    <div class="container">
        <img id="image" src="http://dummyimage.com/200" alt="">
        <span class="text">
            Cupcake ipsum dolor sit. 
            Amet chocolate carrot cake oat cake bear claw croissant.
        </span>
    </div>
</div>

CSS

.container 
{
    background-color: #EEEEEE;
    border: 1px solid #888888;
    padding: 0.3em;
    width: -moz-min-content;
    width: -webkit-min-content;
}
#stupidIE
{
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

Here's the JSFiddle: http://jsfiddle.net/LRYSp/

Tested in Chrome and IE11. But it should work in other browsers. However I don't think it will render correctly in IE9 and below.

Upvotes: 29

fnostro
fnostro

Reputation: 4591

a bit of jquery?

$(function() {
    $('.container').width($('img#image').width());
});

FIDDLE

Upvotes: 0

Related Questions