html - How to get nav bar to float to the left of container div without absolute positioning -
i trying nav bar sit left of container div (and header img) without having position pixels (as seen here in codepen: http://cdpn.io/bfkzx). i'd design flow responsively, i'd center main divs (container/ header img) , have nav hang out on left, i'm having no luck making happen.
thank you!
do have keep html structure same? can following:
<div class="wrap"> <div id="nav"> <ul> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> </div> <div id="body"> <img src="http://placehold.it/600x150" /> <div id="container"> <img src="http://placehold.it/600x800" /> </div> </div> </div><!--//end wrap-->
with css follows (i've removed list styles brevity's sake):
.wrap { overflow: hidden; width: 800px; margin: auto auto; } #nav { width: 160px; float: left; } #body { width: 80%; float: left; }
you can adjust top margin of #nav bump down.
Comments
Post a Comment