I'm trying to float two 'navigation' elements on either side of some content. These elements should stay in place (and visible) as a user scrolls down a page.Example: (see less than and greater than signs): http://jsfiddle.net/dbough/tASs2/I've tried to 'fix' both elements in place with position:fixed, but it causes the elements to collapse togetherExample: http://jsfiddle.net/dbough/tASs2/1/Looking for direction on how to make this work.HTML\[code\]<html><head><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/14602876/main.css"></head><body><div id="container"> <div id="nav"> <span id="nav_left"> <</span> <span id="nav_right"> ></span> </div> <div id="content"> SOME CONTENT </div></div></body></html>\[/code\]CSS (without fixed positioning)\[code\]#container{ width:100%; height:100%; margin:auto; padding:auto; max-width: 400px;}#content{ margin:auto; padding:auto;}#nav_left, #nav_right{ max-width: 10px; font-size: 200%;}#nav_left { margin-left:-10%;}#nav_right { float:right; margin-right:-10%;}\[/code\]
Float navigation elements on the left and right sides of content
- Thread starter mikemelon
- Start date