Question

I’ve got this simple markup:

<div id="parent">
    <div id="static">
        Hello Random
    </div>
    <div id="max">
        100% of the rest
    </div>
​</div>​

I want that the div with ID max should be 100% width as its parents minus the width of the element with ID static. static contains just a single textnode with some random words that I don’t know.

I have tried this CSS but don’t know exactly how to solve it:

#parent{
    width:100%;
    border:1px solid #FF0000;
    float:left;
}

#static{
    float:left;
    border:1px solid #00FF00;
}
#max{
    float:left;
    width:90%; // It's not the same as minus so this will just fail...
}
​

This is my jsFiddle that I have tried with:
http://jsfiddle.net/WnceY/

I want to use pure CSS no JS. In this moment I don’t care about IE either.

Answer 1

I solved it with this CSS:

http://jsfiddle.net/WnceY/9/