Avoid element overlap when dealing with CSS remainder

Question

I have a layout involving a div.left on the left with a set width of 40px, and a div.right on the right with a width of 100% to fill the remaining parent-container space.

HTML:

<div class="parent">
    <div class="left">
        L
    </div>
    <div class="right">
        R
    </div>
</div>

CSS:

.parent {
    background: maroon;
    max-width: 500px;
}
.left {
    float: left;
    background: green;
    width: 40px;
    opacity: 0.7;
}
.right {
    width: 100%;
    padding-left: 50px;
    background: blue;
}

Jsfiddle

Is it possible to achieve this layout (one element with fixed width next to another that fills the remaining space) without resorting to the padding method I'm currently using? My problem is that I'd like to use a transparent background on the left-floated element, so the padding hidden beneath those elements would be visible. Also, my current approach doesn't downsize fluidly.

Answer 1

For that you need to float: left; the other element as well..

.right {
    width: calc(100% - 40px);
    background: blue;
    float: left;
}

Demo

Also, am using calc() here, to deduct the fixed width sidebar which is 40px from 100% right bar.

---

As @Krimson commented that you want some space between the element as well, than use margin

.right {
    width: calc(100% - 80px);
    background: blue;
    float: left;
    margin-left: 40px;
}

Demo

Note: In the demo, am using overflow: hidden; as a quick fix for clearing floats, but better use clear: both; for that, for more information on clearing floats, you can read my answer here.

---

Inspected Elements

Answer 2

What if u change your .right to this:

.right {
    /* width: 100%; remove width */ 
    margin-left: 50px; /* Margin instead of Padding */
    background: blue;
}

JSFiddle Demo