HTML CSS examples for CSS Widget:Menu
fix a menu on the left side and main content to the right
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .page {<!--from w w w .j a v a 2 s.c o m--> display:flex; } .site-header { width:21vw; } .site-content { width:81vw; } .main-navigation .main-navigation ul { padding-top:31px; padding-left:31px; padding-right:31px; } .main-navigation li { border-top:2px solid Chartreuse; padding:8px; } .main-navigation li:last-child { border-bottom:2px solid yellow; } .main-navigation a {} #home { width:81%; height:100%; background-color:blue; } </style> </head> <body> <div class="page"> <header id="masthead" class="site-header" role="banner"> <div class="site-branding"> <figure> <a href="http://localhost/" class="custom-logo-link" rel="home" itemprop="url"> <img width="261" height="150" src="https://www.java2s.com/style/demo/Firefox.png" class="custom-logo" alt="https://www.java2s.com/style/demo/InternetExplorer.png" itemprop="logo"> </a> </figure> </div> <!-- .site-branding --> <nav id="site-navigation" class="main-navigation" role="navigation"> <div class="menu-menu-1-container"> <ul id="primary-menu" class="menu"> <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"> <a href="http://localhost/cigarros/about-us/">Lorem ip</a> </li> <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"> <a href="http://localhost/cigarros/products/">Lorem ip</a> </li> <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"> <a href="http://localhost/cigarros/contact/">Lorem i</a> </li> </ul> </div> </nav> <!-- #site-navigation --> </header> <!-- #masthead --> <div id="content" class="site-content"> <section id="home"> <p>Lorem</p> </section> </div> </div> </body> </html>