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.

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 12:20

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.

enter image description here

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

enter image description here

edited May 23 '17 at 12:20

Community

1
1

answered Feb 20 '14 at 06:47

Mr. Alien

153,751
34
298
278

This wont work. If you notice. OP is adding a 50px padding and the left bar is only 40px which means he want to a gap in the middle. Adding float to both elements will not give the gap – Krimson Feb 20 '14 at 07:23
You added a margin-left in the demo. The css in your answer didn't have that :| – Krimson Feb 20 '14 at 07:28
@Krimson So that's what am saying, I already answered him what he asked, than he can tweak according to his requirements – Mr. Alien Feb 20 '14 at 07:29
1

@Krimson Also, if you see in your solution, the element will overflow.. http://jsfiddle.net/7ubS2/1/ where as in mine, it wont http://jsfiddle.net/4REh3/3/ – Mr. Alien Feb 20 '14 at 07:31
I guess if u remove the width: 100% in mine u wont get the overflow – Krimson Feb 20 '14 at 07:56

Krimson · Answer 2 · 2014-02-20T07:57:24.780

1

What if u change your .right to this:

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

JSFiddle Demo

edited Feb 20 '14 at 07:57

answered Feb 20 '14 at 07:20

Krimson

7,386
11
60
97

Avoid element overlap when dealing with CSS remainder

2 Answers2

JSFiddle Demo