Liquid layout with liquid left + fixed right column

Question

The question is pretty clear. All of these div elements are 100% high. I need a left div for bending, but it does not have overflow: hidden so that I can make it a child also elastic. Inside the left div is an image slider that responds, and I'm trying to make it responsive. can someone help me with my css for this please thanks in advance.

<div id="parent">
    <div id="left">
         Liquid layout
    </div>
    <div id="right">
         Fixed width 450px
    </div>
</div> 

Answer 1

If the div elements are 100% of the height of the window , then your HTML + CSS markup comes down to:

<div id="left">Liquid layout</div>
<div id="right">Fixed width 450px</div>

html   { height: 100%; }
body   { height: 100%; margin: 0; padding: 0; }
#left  { position: absolute; top: 0; bottom: 0; left: 0; right: 450px; }
#right { position: absolute; top: 0; bottom: 0; right: 0; width: 450px; }

Demo here

---

div , " " : (i) (ii) float (iii) (iv) div

<div id="parent">
    <div id="left">Liquid layout</div>
    <div id="right">Fixed width 450px</div>
    <div class="clear"></div>
</div>

#parent { border-right: 450px solid orange /* right bg */; background-color: yellow /* left bg */; }
#left   { float: left;  width: 100%; }
#right  { float: right; width: 450px; margin-right: -450px; }
.clear  { clear: both; }

Answer 2

table-cell :)

Qolami, css3, , display:table IE8 .... , " clear divs!

 html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
#parent {
    display:table;
    width:100%;
    height:100%;
    word-break:break-all;
}
#left {
    display:table-cell;
    border:1px solid red;
}
#right {
    width:450px;
    display:table-cell;
    border:1px solid green;
}

Answer 3

, float div margin :

HTML:

<div id="parent">
    <div id="right">
         Fixed width 450px
    </div>
    <div id="left">
         Liquid layout
    </div>
</div>

CSS

#right {
  float: right;
  width: 450px;
}

#left {
  margin-right: 450px;
}

JSFiddle Demo

table. , .

. table - ( ).

W3C:

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell table-caption

, table ( , ).

Answer 4

If you want to go with flexthan here, you go ...

Demo

HTML

<div class="wrap">
    <div class="fluid"></div>
    <div class="fixed"></div>
</div>

CSS

html, body, .wrap, .wrap > div {
    height: 100%;
}

.wrap {
    display: flex;
    display: -webkit-flex;
}

.fluid {
    width: 100%;
    background: #eee;
    flex: 1;
}

.fixed {
    background: #aaa;
    width: 200px;
}

Answer 5

Demo

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

#left, #right {
    height: 100%;
    float: left;
}
#parent{
    width: 100%;
    height: 100%;    
}   

#left {
   width: calc(100% - 450px);;
   background-color: teal; 
}
#right {    
    width: 450px;
    background-color: olive; 
}