JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0069)http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta name="author" content="Andrea Barnett for Killersites">

<title>3-Column, Fixed-Width Layout with CSS</title>

<!-- Ideally, we would use an external stylesheet that we would link to from here.  However, for the purpose of this excercise, putting the styles directly here will make things more obvious. -->
<link rel="stylesheet" href="05.css" type="text/css" />
</head>
<body>
<div id="header">
    <h1>This is our Site Header</h1>
</div>

<div id="wrapper">
    <div id="column-left-fake">
    </div>
    <div id="column-left">
        <h2>Left Column</h2>
            <ul>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 1</a></li>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 2</a></li>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 3</a></li>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 4</a></li>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 5</a></li>
                <li><a href="http://www.csstutorial.net/wp-content/uploads/2010/04/3-column03.html#">Link 6</a></li>
            </ul>
    </div>
    <div id="column-center">
        <div id="content">
            <h2>Center Column</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure...

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    min-width:1000px;
}

#wrapper{
    position:relative;
    width: 1000px;
    background: silver;
    margin: 0 auto;
    min-width:1000px;
    overflow-x:hidden;
}
/*.padding{ width:570px; margin:0px auto; }  
#content{ width:570px; float: right; } /*I know there are two right's, it's a mistake WordPress keeps adding in*/
#header {
    position:fixed;
    width:100%;
    height:100px;
    background: black;
    color: white;
    z-index:100;
    min-width:1000px;
}

#column-left{
    position:fixed;
    float:left;
    height:720px;
    margin-top:100px;
    width: 170px;
    background: red;
    z-index:100;
}

/*#column-left-fake {
    margin-top:100px;
    width: 170px;
    margin-right:5px;
    float: left;
}*/

#column-center {
    margin-top:100px;
    float: left;
    height:auto;
    background: yellow;
    margin-left:175px;
    margin-right:255px;
}

#column-right{
    position:fixed;
    float:right;
    height:720px;
    margin-top:100px;
    margin-left:750px;
    width: 250px;
    background: purple;
    z-index:100;
}

/*#column-right-fake {
    margin-top:100px;
    width: 250px;
    float: left;
    margin-left:5px;
}*/

#footer {
    clear: both;
    background: green;
}