CODEWITHSUNDEEP
htmlinternet-explorerinternet-explorer-7css
panfil
panfil

Reputation: 1539

100% width block inside inline-block container in IE7

I have an issue with IE7. Block element inside inline-block container not stretched to fit continer width.

Code:

<div class="a">
    <div class="b"></div>
    <div class="c"></div>
</div>

.a {
    border: 5px solid blue;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.b {
    width: 500px;
    height: 10px;
    background: green;
}
.c {
    height: 10px;
    background: red;
}

Here is desired behaviour seen in other browsers: enter image description here

Here is what I got in IE7: enter image description here

Example: http://jsfiddle.net/Lnfwezm4/5/

Direct link: http://fiddle.jshell.net/Lnfwezm4/5/show/

How can I achieve red block to fit parent width in IE7 (IE6 would be great too)?

Upvotes: 0

Views: 414

Answers (1)

Sam Braslavskiy
Sam Braslavskiy

Reputation: 1288

Adding any width to .a will fix that:

.a {
    border: 5px solid blue;
    display: inline-block; *display: inline; zoom: 1;
    width: 500px;
}

Let's see what's happening under the hood. You've got a block element with default width of 100% of parent element's width. The parent element of .c is .a, which has no width (either that implicitly set 100% nor any other), while it's width depends on it's childs... so, 100% of undefined is undefined, or, in this case, 0px; (I have intentionally simplified things a bit)

To my mind, the only way to let IE7 know how to calculate the width of .c is to give some width to .a (not necessarily fixed, can be also in % or in other units).

If you, by any reason, can't give any width to .a, please, let us know why and what are you trying to do. There's a good chance that it can be achieved with slightly different markup.

Upvotes: 1

Related Questions