expanding div width if other div is missing - html

Question

I have two divs inside a containers floating to the left. In some of the containers the left div is missing, so I want to do it so that if the left div is missing then the right div should expand to the full width of container.
In my code below, I have specified the width of the right div and because of this if the left div is missing, it does not fill the whole container.
Here's the code:
HTML:
<div class="box">
<div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
<div class="right">... content...</div>
</div>
CSS:
.box{
width: 300px;
border: 1px solid red;
margin: 0 auto;
overflow: hidden;
}
.left{
width: 80px;
margin-right: 10px;
float: left;
}
.right{
float: left;
width: 210px;
}
JSFiddle:
http://jsfiddle.net/DMFz8/

Answer 1

You can use an adjacent selector, so that .right becomes floated only if there's a .left next to it.
Replace the .right selector and rule with this:
.left + .right{
float: right;
width: 210px;
}
Demo

Answer 2

I don't know what ypu want exactly but try this maybe helpful
<div class="box">
<div class="left"><img src="http://i50.tinypic.com/2cxj31z.jpg" ></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget ligula sapien, sed tempor felis. Vivamus eget bibendum augue. Sed sit amet nulla lectus. Etiam vitae lacus ipsum. Aliquam malesuada orci nec ipsum pretium fermentum. Fusce libero mauris, convallis ut aliquam et, scelerisque vel turpis.
</div>
jsFiddle