JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_container">
    <div id="header">
        <div class="headimage">
            <a href="http://website.com/" target="_blank"><img class="headimager" src="http://placehold.it/300x90"/></a>
        </div>
        <select class="class-selector">
            <option value=>- Select -</option>
        </select>
        <div class="classcycler">
            <a id="NextClass" href="javascript: void(0);"><font color=#EFEFEF>Next</font></a> <font color=red>|</font> <a id="PreviousClass" href="javascript: void(0);"><font color=#EFEFEF>Previous</font></a>
        </div>
        <div class="classcycler2">
            <a class="downclass" href="javascript: void(0);"><font color=#EFEFEF>Down</font></a> <font color=red>|</font> <a class="upclass" href="javascript: void(0);"><font color=#EFEFEF>Up</font></a>
        </div>
        <div class="headright">
            <a class="TOPJS" href="javascript: void(0);"><font color=#EFEFEF>Up to Top</font></a> <br> <a class="KEYJS" href="javascript: void(0);"><font color=#EFEFEF>Down to Bottom</font></a>
        </div>
    </div>
</div>
<div id="footer_container">
    <div id="footer">
        <div class="footimage">
            <a href="http://website.com/" target="_blank"><img class="headimager" src="http://placehold.it/300x90"/></a>
        </div>
        <div class="footleft">
            <a class="def" href="javascript: void(0);"></a>
        </div>
        <div class="footright">
            <a class="abc" href="javascript: void(0);"></a>
        </div>
    </div>
</div>

CSS

body {
    line-height: 1.6em;
    background-color: #7F97B1;
    overflow-x: scroll;
	margin: 0;
    padding: 0;
}

#header_container {
    background: #262A2D url('gradhead.png') repeat-x;
    border: 0px solid #666;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #ECECEC;
}

#header .headimage {
}

#header .headmid {
    top: 60%;
    left: 53%;
    position: absolute;
    font-size: 15px;
}

#header .headright {
    top: 15px;
    right: 20px;
    position: fixed;
    font-size: 20px;
    text-align: right;
}

#header .class-selector {
    top: 5px;
    left: 20px;
    position: fixed;
}

#header .classcycler {
    top: 30px;
    left: 20px;
    position: fixed;
    font-size: 20px;
}

#header .classcycler2 {
    top: 50px;
    left: 20px;
    position: fixed;
    font-size: 20px;
}

#container {
    margin: 0 auto;
    /*overflow: auto;*/
    padding: 80px 0;
    width: 100%;
}

#content {
}

#footer_container {
    background: #262A2D url('gradhead.png') repeat-x;
    border: 0px solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    text-align: center;
    color: #ECECEC;
}

#footer .footleft {
    top: 12%;
    left: 2%;
    position: absolute;
    font-size: 20px;
}

#footer .footright {
    top: 12%;
    right: 2%;
    position: absolute;
    font-size: 20px;
}

#footer .footimage {
}

#footer .footleft a {
	width: 70px;
	height: 70px;
	display: block;
	background: url('http://placehold.it/50x50') no-repeat;
}

#footer .footleft a:hover {
	background: url('http://placekitten.com/g/50/50') no-repeat;
}

#footer .footright a {
	width: 70px;
	height: 70px;
	display: block;
	background: url('http://placehold.it/50x50') no-repeat;
}

#footer .footright a:hover...

JavaScript

var $widthhead = $(".headmid").width();
    $(".headmid").css("margin-left",$widthhead/2*(-1));