html - div height: 0; without any floating child elements? -


here's html have

<nav class="navlist">     <span class="left">         <li><a class="active" href="#">home</a></li>         <li><a href="#">work</a></li>         <li><a href="#">services</a></li>     </span>     <span class="right">         <li><a href="#">about</a></li>         <li><a href="#">blog</a></li>         <li><a href="#">contact</a></li>     </span> </nav> 

relevant css:

.navlist {     position: fixed;     top: 0;     width: 100%;     list-style: none;     background-color: rgba(255,255,255,0.4); } .navlist span {     position: absolute;     margin: 10px 0; } .navlist .left {     right: 0px;     margin-right: 50%;     padding-right: 75px; } .navlist .left li {     margin-left: 75px; } .navlist .right {     left: 0px;     margin-left: 50%;     padding-left: 75px; } .navlist .right li {     margin-right: 75px; } .navlist li{     display: inline; } .navlist li {     font-family: "futura thin", sans-serif;     font-size: 1.2em;     color: black;     text-decoration: none; } 

why height of <nav> element 0 instead of wrapping height around child elements? i've tried absolutely everything, adding overflow: auto; etc. , nothing works without defining height manually, not want. help?

<span> should <ul> or <li> should <span> or inline-elements make valid code. best use <ul><li><a> list of links.

position:absolute;(or fixed) takes element out of natural flow of page, <nav> have no content make grow.


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -