JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id='container'>
<div id='header'>
This is the header.
</div>
<div id='container2'>
<div id='container1'>
<div id='col1'>
Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br /> Menu<br />
Menu<br />
</div>
<div id='col2'>
Content!<br />
Content!
</div>
</div>
</div>
</div>
<div id='footer'>
This is the footer.
</div>
</body>
CSS
html, body{
margin:0px;
height:100%;
}
#container
{
height: auto;
min-height: 100%;
width:1024px;
margin:auto;overflow: auto;
}
#header{
width:100%;
height:100px;
background:purple;
}
#container2{
height: 100%;
width:1024px;
background:yellow;overflow: auto;
}
#container1
{padding-bottom: 32px;overflow: auto;
}
#col1{height: 100%;
float:left;
width:150px; background:red;
overflow: auto;
}
#col2{
height: 100%;
float:left;
width:874px;overflow: auto;
}
#footer{
width:1024px;
background:purple;
height: 32px; margin-top: -32px; clear: both; position: relative; }