JSFiddle - React, Tailwind, and code Playground
HTML
<DIV ID="leftbuttons">
<DIV CLASS="activitybutton">This is left</DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV>
</DIV>
<CENTER>
<DIV ID="wrapper">
<DIV ID="header">
<img src='css/images/logo.png' />
</DIV><br>
<DIV ID="navbar">NAVIGATION</DIV>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>
<DIV ID="content">
asdf
sa
df
asdf
as
df
asdf
sad
f
sadf
asd
f
sadf
asd
f
sdf
</DIV>
<DIV ID="footer">
</DIV>
</DIV>
</CENTER><
<DIV ID="rightbuttons">
<DIV CLASS="activitybutton">This is right</DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV><BR>
<DIV CLASS="activitybutton"></DIV>
</DIV>
CSS
{ margin: 0; padding: 0; border: 0; }
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #B99666;
background-image: url('images/bg.jpg');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
margin: 0 auto;
width: 1600px;
}
#header {
float:left;
color: #333;
width: 905px;
padding: 10px;
border: 1px solid #ccc;
height: 300px;
margin: 10px 0px 5px 0px;
margin-left: 221px;
background: #634636;
}
.activitybutton{
color: #333;
width: 195px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 90px;
margin: 0px 0px 5px -11px;
background: #F2F2E6;
z-index: 2;
}
#navbar {
width: 924px;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 5px 5px 5px 0px;
margin-top: 0px;
padding: 0px;
margin-left: 221px;
height: 100px;
float: left;
}
/*#navbar-anchor {
}*/
#leftbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 0px 5px 5px 0px;
margin-top: 180px;
padding: 10px;
height: auto;
width: 195px;
position: fixed;
float: left;
z-index: 2;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
margin-left: 221px;
margin-top: 0px;
padding: 10px;
height: auto;
width: 905px;
display: inline;
}
#rightbuttons {
color: #333;
border: 0px solid #ccc;
/*background: #E7DBD5;*/
margin: 0px 5px 5px 0px;
margin-left: 1154px;
margin-top: 180px;
position: fixed;
padding: 10px;
height: auto;
width: 195px;
z-index: 2;
right: 0;
}
#footer {
width: 900px;
height: 25px;
margin-left: 221px;
z-index:100;
}
.logfooter { position:relative; bottom: 0px; left: 0px; z-index: 5; display:inline-block; }
.footerbranch { position:relative; bottom: 232px; left: 702px; z-index: 1; display:inline-block; }
.navlogbottom { position:relative; bottom: 232px; left: 702px; z-index: 4; display:inline-block; }