HTML CSS examples for CSS Widget:Header
Positioning inside header and divisions
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> root {<!-- w w w . j a va2 s . c om--> display: block; } body{ background: #E4E4E4; } #container{ width: 800px; height: 130px; margin: 0 auto; } span{ font-variant: small-caps; font: 16px Verdana; font-weight: bolder; color: #82b704; padding-left: 20px; } a{ text-decoration: none; cursor: pointer; } .companyinfo{ float: left; width: 80%; height: 35px; line-height: 35px; font: 18px Verdana; color: #82b704; } .logout{ float: left; width: 20%; height: 35px; line-height: 35px; font: 14px Verdana; color: gray; text-align: right; } .header-box { top: 40px; width:100%; height: 81px; position: relative; } header nav{ border: 1px solid black; height: 81px; } header nav ul{ width:100%; height: 81px; margin:0px auto; padding:0px; text-align:center; } header nav ul li { display: inline-block; list-style-type: none; text-align:center; line-height: 1; border: 1px solid red; } header nav li:first-child { background:none; } header nav li a { color:#fff; text-decoration:none } header nav li.current a, header nav li a:hover { color:#82b704; cursor: pointer; } </style> </head> <body> <header> <div id="container"> <div class="companyinfo"> <span>test test test</span> </div> <div class="logout"> test test test test test </div> <div class="header-box"> <div class="left"> <div class="right"> <nav> <ul> <li class="current"> <a>Home</a> </li> <li> <a>Site</a> </li> <li> <a>About</a> </li> <li> <a>Go</a> </li> </ul> </nav> </div> </div> </div> </div> </header> </body> </html>