CSS width of div if other div exists - html

Question

In the following HTML, I want to specify the width of .left only if there is .right div in the .wrapper, otherwise it should take the full width. For example, if there is .right div, then the width of the .left should be 300px, otherwise it should be 500px.
I think this can be done using the css + selector, but if I am not sure how can I apply on the .left.
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper{
width: 500px;
}
.left{
width: 300px;
}
.right{
width: 200px;
}

Answer 1

You can use the :only-child selector
.left:only-child
{
width: 100%;
}
Example
If you don't want to use the :only-child selector you could try the following
.wrapper
{
width: 500px;
min-height: 50px;
}
.left {
overflow: hidden;
min-height: 50px;
border: 1px dashed #f00;
}
.right {
float: right;
width: 200px;
min-height: 50px;
border: 1px dashed #00f;
}
Example

Answer 2

Instead of using CSS for this, why not using the HTML file?
From your question it seems that you have different HMTL files/output. If you add different classes in the HTML files, you can target them directly in CSS:
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
and
<div class="wrapper">
<div class="full"></div>
</div>
You CSS would contain something like this:
.wrapper {
width: 500px;
}
.left {
width: 300px;
}
.right {
width: 200px;
}
.full {
/* Whatever is required for full width */
}
Much easier this way! (Assuming you can change the HTML files/output)

Answer 3

I'd go for Veger's solution as well if you control the HTML output.
If not, the + selector only works for the latter element, thus with .left + .right you can change the right div if the left div is present. It doesn't work the other way around.
If you know, you'll always have a left div, you might put the right div into the left div and have it float right with a width of 200px.

Answer 4

There is no way that CSS can detect if an element exists or not, it is only for the presentation of elements.
You can however use javascript to do this. I will show you a jQuery version of it:
You have an element:
<div id="one">
My diiiv.
</div>
And you want to do something if this element exists:
$.fn.exists = function(callback) {
var args = [].slice.call(arguments, 1);
if (this.length) {
callback.call(this, args);
}
return this;
};
This is a function that will determine if an element exists when it's called.
What you can do now is to test if any element exists:
$('div#one').exists(function() {
this.append('<p>I exist!</p>');
});
So if it does, you can augment the DOM in whichever way you want. CSS cannot do this, that's what javascript and its libraries are for :)
http://jsfiddle.net/5Q2Gm/