html - How to align center div element -
i have layout design,
and want align div id:#middle center.
i put background color green on div.
also want remain current state of layout scroll bars, size, etc, ...
what best way implement this?
i attached snippet of code , jsfiddle below.
jsfiddles: https://jsfiddle.net/crisply/yr8he13g/8/
please refer , give me advices.
thank in advance.
<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"> menu </div> </div> <div id="content"> <div id="middle"> contents </div> </div> <div id="footer"> <div id="copyright"> copyright © 2015 ezrobotics. 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> here 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 10px 10px 10px; max-width: 940px; background-color: green; } /* -- footer ----------------------------------------------- */ #footer { position:absolute; left:0px; right:0; bottom:0; height:24px; line-height: 24px; overflow:hidden; background-color: #666666; color: #eee; font-size: 13px; } #copyright { text-align: right; position: absolute; top: 0px; left: 0px; padding-left: 5px; /*background-color: blue;*/ } #loginstate { position: absolute; top: 0px; right: 0px; /*background-color: green;*/ } #username { border: 1px solid #c5c5c5; height: 18px !important; line-height: 18px; font-size:13px; padding-left: 15px; padding-right: 15px; margin-right: 5px; } /* table */ .tbl { width:100%; height:100%; /*border:1px solid #000;*/ border-collapse:collapse; } .tbl th, td { /* border:1px solid #000; */ } .tbl th { background-color:#eee; }
css
#middle { overflow-y: scroll; position: absolute; top: inherit; bottom: inherit; left: 0; right: 0; padding: 10px 10px 10px 10px; max-width: 940px; background-color: green; margin: 0 auto; }
Comments
Post a Comment