Liquid layout with liquid left + fixed right column

Question

The question is pretty self explanatory. All these div elements are 100% in height I need the left div to flex, but not have it set to overflow:hidden so that I can make it\

Answer 1

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; 
}

Answer 2

You could achieve this layout by setting a float property to one div and using margin for the other one:

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

There's no need to use table displayed elements. In fact, I really recommend to avoid using that for layout purposes.

Note: Using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table).

According to W3C spec:

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

These values cause an element to behave like a table element (subject to restrictions described in the chapter on tables).

Answer 3

If you would like to go with the flex approach than 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 4

If div elements are 100% of window height then your HTML+CSS markup is reduced 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

---

If div elements are equal height then here is an "old school" approach that (i) Preserves source order (ii) Uses floats (iii) Produces equal height faux columns (iv) Requires one clearing 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; }

Demo here

Answer 5

use table-cell for your purpose :)

EDIT after Hashem Qolami answer, since you have tagged question in css3 category, let me be clear that display:table is supported IE8 and onwards....and is useful if you don't wanna mess around with clearing the divs!!

fiddle here

 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;
}