JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
            <h1>Chemin 26</h1>
        </div>
        <div id="center">
            <div id="sidebar">
                <h2>Navigation</h2>
                <ul id="menu">
                    <li><a href="#" title="menu 1">menu 1</a></li>
                    <li><a href="#" title="menu 2">menu 2</a></li>
                </ul>
            </div> <!-- #sidebar -->
            <div id="content">
                <h2>contenu</h2>
                <p>Texte du contenu</p>
            </div><!-- #content -->
        </div><!-- #center -->

        <div id="footer">
            <p>pied de page</p>
        </div><!-- #footer -->

CSS

html, body, h1, h2, p, ul {margin: 0;padding: 0;}

html, body {
    min-width: 800px;
    height: 100%;
}

body {
    position: relative;
    background: #FFCE5E;
}

#header, #center, #footer {
    width: 800px;
    margin: auto;
}

#header {
    height: 200px;
    color: #fff;
    background: url("http://chemin26.pagesperso-orange.fr/entete.png") no-repeat;
}

#center {
    overflow: hidden;
}

#sidebar {
    float: left;
    width: 200px;
    border-right: solid #7fcf2e;
}

#content {
    overflow: hidden;
}

#footer {
    position: absolute;
    margin-left: -400px;
    bottom: 0;
    left: 50%;
    background: #7FCF2E;
}