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