JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<form method="post" action="./" id="form1" class="AspForm">
<div id="header">
<div id="top">
<div id="logo">
Logo
</div>
<div id="pageInfo">
<div id="pageTitle">Title</div>
<div id="pageDesc">Description</div>
<div id="samplingInfo">Informations</div>
</div>
</div>
<div id="menu">
</div>
</div>
<div id="content">
<div id="middle">
<img src="http://www.google.co.kr/images/srpr/logo11w.png" style="height: 200px; width:1500px">
</div>
</div>
<div id="footer">
<div id="copyright">
Copyright © 2015 eZRobotics. All rights reserved.
</div>
<div id="loginState">
<table>
<tr>
<td valign="top">
<div id="username">admin</div>
</td>
<td>
logout btn
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
CSS
html,body{
/*font-size: 12px;*/
font-family: 'Tahoma', 'Segoe UI', Verdana !important;
}
body{
height:100%;
}
div {
box-sizing: border-box;
}
/* -- header ----------------------------------------------- */
#header{
position:absolute;
left:0px;
right:0;
top:0;
height:90px; /* TOP height + menu height*/
}
#top {
height: 60px;
}
#logo {
padding: 15px;
height: 30px;
width: 200px;
}
/* Title & sampling information */
#pageInfo {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 40px;
margin: 10px;
text-align: center;
vertical-align:central;
}
#pageTitle {
font-size: 23px;
font-weight: bold;
font-family: Tahoma, 'Segoe UI', Verdana;
}
#pageDesc {
font-size: 14px;
color: #666;
}
#samplingInfo {
position: absolute;
bottom: 0px;
right: 0px;
text-align: right;
font-size: 13px;
}
#menu {
height: 30px;
background-color: #666666;
text-align: center;
}
/* -- ccontent ----------------------------------------------- */
#content {
top:90px; /* header height */
bottom:24px; /* Footer height */
}
/* content */
#left{
position:absolute;
top: inherit; /* header height */
bottom: inherit;
left:0;
width:200px;
padding: 10px 10px 10px 10px;
}
#right{
overflow:auto;
overflow-y: scroll;
position:absolute;
top: inherit; /* header height */
bottom: inherit;
left:200px;
right:0;
padding: 10px 10px 10px 0px;
}
#middle {
overflow-y: scroll;
position:absolute;
top: inherit;
bottom: inherit;
left:0;
right:0;
padding: 10px...