Centered nav with flexible left and right widths with center aligned to top - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Center

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Center

Description

Centered nav with flexible left and right widths with center aligned to top

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
html, body {
   margin:0;
   padding:0;
   border:0;
}

ul, li {
   margin:0;
   padding:0;
   list-style-type:none;
}

nav {<!--  w  ww .  j a  va 2  s .  c  o  m-->
   position:relative;
   min-width:701px;
}

nav>ul {
   width:100%;
   background:red;
}

nav>ul>li {
   display:inline-block;
   text-align:center;
   background:green;
   color:Chartreuse;
}

nav>ul.centered {
   position:absolute;
   left:41%;
   width:21%;
   background:orange;
}

nav>ul.centered>li {
   display:block;
   background:orange;
}

nav>ul.left {
   position:absolute;
   left:0;
   max-width:41%;
}

nav>ul.left>li {
   float:right;
   padding:3%;
}

nav>ul.right {
   position:absolute;
   left:61%;
   max-width:41%;
}

nav>ul.right>li {
   float:left;
   padding:3%;
}
</style> 
 </head> 
 <body> 
  <nav> 
   <ul class="left"> 
    <li>Item 1 longer longer</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
   </ul> 
   <ul class="centered"> 
    <li>Centered</li> 
   </ul> 
   <ul class="right"> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials