Dynamic div width inside another div

I have 2 inline divs inside a parent div:

.parent {
    width: 200px;
    height: 2开发者_JAVA技巧00px;
}
.div1 {
    float: left;
    width: 10px;
    height: 10px;
    background-color: blue;
}
.div2 {
    position: relative;
    height: 100%;
    width: 100%;
    right: 0px;
    float: left;
    background-color: red;
} 

The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.

Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/

How can I make div2 have a width of 190px without setting a static width?

You could do it this way:

.parent{
    width:200px;
    height:200px;
}

.div1 {
   float: left;
   width:10px;
   height:10px;
   background-color:blue;
}

.div2{
    height:100%;
    width:90%;
    float:left;
    background-color:red;
} 

You could also do it without floating the right div (this is the way I would prefer):

.parent{
    width:200px;
    height:200px;
}

.div1 {
    float: left;
    width:10px;
    height:10px;
    background-color:blue;
}

.div2{
    height:100%;
    width:100%;
    margin-left:10px;
    background-color:red;
} 

in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/