html - Why is my horizontal menu not floating to the right? -


would know why horizontal menu floating right despite ? can view live here.

<header>    <nav>     <ul>       <li><a href="#">home</a></li>       <li><a href="#">work</a>         <ul>           <li><a href="#">résumé</a></li>           <li><a href="#">portfolio</a></li>         </ul>       </li>       <li><a href="#">play</a>         <ul>           <li><a href="#">experiments</a></li>           <li><a href="#">utilities</a></li>         </ul>       </li>       <li><a href="#">contact</a></li>     </ul>   </nav>   <div id="news_box" style="max-width: 400px; float: right; text-align: left;"></div>  </header> 

css:

body {   background-color: rgb(255, 255, 255);   font-family: helvetica;   font-size: 16px;   font-weight: 400;   line-height: 1.38;   color: rgb(21, 84, 244);   margin: 0;   margin: 0;     padding: 0;     border: 0; }  header {   width: 100%;   height: 600px;   min-height: 300px;   margin-right: auto;   margin-left: auto;   background-image: url('http://lorempixel.com/output/nature-q-c-1020-711-1.jpg');   background-size: cover;   background-position: center center;   background-color: rgb(222, 222, 222); }  h1 {   width: 100%;   margin-top: 39px;   margin-right: auto;   margin-left: auto;   font-size: 37px;   font-weight: 400;   line-height: 1.38;   text-align: center;   color: rgb(0,0,0); }   .blablatext {   margin-top: 16px;   margin-right: auto;   margin-left: auto;   font-weight: 400;   line-height: 1.38;   text-align: center;   color: rgb(21, 84, 244); }  nav {margin: 20px auto} nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top} nav {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px} nav a:hover {background: rgba(0,0,0,0.25)} .activenav {background: rgba(0,0,0,0.25)} nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px} nav ul li ul li {display: block; float: none; margin: 0; padding: 0} nav ul li ul li {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px} nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)} .hover {display: block;} .hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;} 

this keep news div below , float right

nav {     float: right;     margin: 20px auto;     width: 100%; } nav ul {     float: right; }   

result result


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

thorough guide for profiling racket code -