I'm wondering what the best way to go about doing this is...

I have 3 `div`s:

* a `div#container` with `width=100%;` that holds 2 inner `div`s
* a `div#inner_left` with `width` changing dynamically, but no wider than 200px (will hold a product image)
* an `div#inner_right` where the width should fill the rest of the space in the container (will contain text to describe the product shown)

```
#container {
   width:100%
}

#inner_left {
    display:inline-block:
    max-width:200px;
}

#inner_right {
    display:inline-block;
    width:100%; 
}

```

The problem is that the `div#inner_right` creates a line break and fills the entire width. How can I make them align next to each other, with the right `div` accounting for the width taken by the left `div` (which changes dynamically?). I've gotten this to work other ways, but I'm looking for a clean solution...

Any help for a CSS noob is much appreciated!