Question

i’m using a grid based layout, which, in short, looks like this:

<div class="width-2">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

The appropriate CSS:

h1 { width: 300px; }
.width-2 { width: 600px; }
.embed-container > iframe { width: 100%; /* Must turn out to be 600px wide */ }

The problem starts when i want to introduce auto width:

<div class="width-auto">
    <h1>300px</h1>
    <div class="embed-container">
        <iframe width="400" height="400" ...></iframe>
    </div>
</div>

With css:

h1 { width: 300px; }
.width-2 { width: 600px; }

.embed-container > iframe { 
    width: 100%; 
} 
.width-auto .embed-container > iframe { 
    width: auto; /* Must revert to 400px, but doesn't? */ 
}

What i expect is that iframe would go back to take its width from its own width attribute and be 400 pixels wide, but instead it is 300px wide!!!

Here it is live:
http://jsfiddle.net/ETUkD/2/

Note that what is represented by iframe here is any embedded content, so i don’t want to regex additional style attribute on it, or modify it in any other way.

UPDATE: One solution is to use :not() selector, but that is not supported by internet explorer…

div:not(.width-auto) > .embed-container > iframe { 
    width: 100%; 
} 

Answer 1

Solution 1:
You could consider using Selectivzr. http://selectivizr.com/ It will allow you to use :not() in IE6-8 using one of many javascript libraries.

Solution 2: Why not be more specific in your CSS like this? http://jsfiddle.net/pkY8K/

.width-2 .embed-container iframe {
    width: 100%;   
}

Declare the iframe width to be 100% only when it’s in the div’s you know need it. And then drop the .width-auto .embed-container iframe { width: auto; } entirely.