CODEWITHSUNDEEP
htmlcsscss-floatfluid-layout
Marcatectura
Marcatectura

Reputation: 1695

Avoid element overlap when dealing with CSS remainder

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

Upvotes: 1

Views: 67

Answers (2)

Krimson
Krimson

Reputation: 7664

What if u change your .right to this:

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

JSFiddle Demo

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157334

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

enter image description here

Upvotes: 1

Related Questions