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
Post a Comment