JSFiddle - React, Tailwind, and code Playground
HTML
<div id="topbalk"></div>
<div id="sitecontainer">
<div id="banner">Banner</div>
<div id="links">dit is links</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vitae elit sit amet velit volutpat aliquam. Phasellus ligula enim, tempor in fermentum et, convallis et felis. Vestibulum bibendum tristique diam et tempor. Ut mattis mauris augue, ac vulputate urna tempus sed. Morbi hendrerit ipsum sed lacus ultrices condimentum. Sed in aliquam tortor. Ut tincidunt magna et sagittis tincidunt. Vestibulum ante leo, congue eu ante ac, interdum ornare mi. Phasellus semper molestie nulla, vel volutpat nibh luctus vitae. Ut sit amet dapibus dui, et dapibus turpis. Aenean lorem purus, viverra sed nibh sed, sollicitudin porttitor enim. Mauris pellentesque enim magna, eu tincidunt risus malesuada sit amet.</p>
<p>
Curabitur non dui id mauris mattis pretium non nec lacus. Vestibulum mollis fringilla nulla, nec malesuada tellus rhoncus nec. Cras eros ipsum, feugiat quis scelerisque ut, suscipit in tortor. Donec condimentum tortor sit amet nisl dapibus, id imperdiet erat ultrices. Aenean ipsum lorem, commodo at risus id, egestas semper velit. Suspendisse dictum gravida tellus sed pulvinar. Aliquam eros orci, mollis quis enim ac, dictum egestas lectus. Ut ornare sem tempus tortor condimentum, varius mollis leo varius. Aliquam sed quam consectetur, ornare nulla sit amet, tristique orci. Phasellus placerat ipsum risus, consectetur gravida diam auctor vel. Donec accumsan mauris cursus libero rutrum ultrices. Donec luctus accumsan diam, in dignissim arcu fringilla quis.</p>
<p>
Curabitur non dui id mauris mattis pretium non nec lacus. Vestibulum mollis fringilla nulla, nec malesuada tellus rhoncus nec. Cras eros ipsum, feugiat quis scelerisque ut, suscipit in tortor. Donec condimentum tortor sit amet nisl dapibus, id imperdiet erat ultrices. Aenean ipsum lorem, commodo at risus id, egestas semper velit. Suspendisse dictum gravida...
CSS
html, body {
background: #ffffff;
margin: 0;
padding: 0;
height: 100%;
}
#sitecontainer {
background-image:url(gaussian_bg.png);
min-height: 100%;
width: 970px;
margin: 0 auto;
}
/*---------------------------TOPBALK--------------------------*/
#topbalk {
background-color:#363636;
height: 32px;
width: 100%;
}
/*---------------------------BANNER & CONTENTMENU--------------------------*/
#banner {
background-color:#999999;
width: 970px;
height: 172px;
margin: 0 auto;
right: 30px;
}
#contentmenu {
width: 530px;
height: 37px;
position:relative;
left: 250px;
top: 94px;
background-color:#666666;
}
/*---------------------------CONTENT & FOOTER--------------------------*/
#content{
background-color:#CCCCCC;
width: 527px;
position: relative;
margin: 0 auto;
}
#links {
background-color:#966;
width: 200px;
height: 500px;
position: fixed;
}
#rechts {
background-color: #000000;
height: 500px;
left: 50%; /* centreren */
margin-left: 285px; /* helft van de wrapper - de breedte van het element: 970/2 - 200 */
position: fixed;
right: 0;
top: 200px;
width: 200px;
}
#footer {
position: fixed;
bottom: 0;
width: 970px;
height: 53px;
background-color:#999999;
}