Layout de 2 columnas: fluid-fixed

Basado en: http://www.dynamicdrive.com/style/layouts/item/css-right-frame-layout/

by jrdiaz

HTML

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Right Frame Layout</title>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

    
<body>

<div id="leftFrame">
    <div class="P10">
    
        <h1>Dynamic Drive CSS Library</h1>
        <p><script type="text/javascript">filltext(255)</script></p>
    
    </div>
</div>


<div id="rightFrame">
    <div class="P10">
    
        <h1>CSS Right Frame Layout</h1>
        <h3>Sample text here</h3>
    
    </div>
</div>


</body>
</html>

CSS

.BSBB { box-sizing: border-box;  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  -ms-box-sizing: border-box; }
.P10 { padding: 10px; }
.B { border: 1px solid red; }

/* HTML 100% width/height */
html, body {
    overflow: inherit; /* triggers 100% height in Opera 9.5 */
    height: 100%; /* gives layout 100% height */
    min-height: 100%; max-height: 100%;
    position:relative;
    margin: 0; padding: 0; border: 0;
}
.wrapper { min-height: 100%; /* gives layout 100% height */ }
* html .wrapper { height: 100%; /* IE6 treats height as min-height */ }

* html #maincontent{ height: 100%; width: 100%; } /* IE6 hack */

/* Layout */
#rightFrame { overflow: auto; position: absolute; top: 0; bottom: 0; right: 0; height: 100%; }
#leftFrame  { overflow: auto; position: fixed;    top: 0; bottom: 0; left: 0; }

/* Apariencia */
#rightFrame { background: navy; color: white; }
#leftFrame  { background: #fff; }

/* Control del ancho de las capas */
* html body { padding: 0 200px 0 0; /* Set value to (0 WidthOfFrameDiv 0 0) */ } /* IE6 hack */
#rightFrame { width: 200px; } /* Width of fixed width div*/
#leftFrame  { right: 200px; /* Equals to width of fixed width div */