Home/ Questions/Q 9211257
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T01:15:15+00:00

I’m trying to float two ‘navigation’ elements on either side of some content. These

  • 0

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 together

Example: http://jsfiddle.net/dbough/tASs2/1/

Looking for direction on how to make this work.

HTML 

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<div id="container">
    <div id="nav">
        <span id="nav_left">&nbsp;&lt;</span> 
        <span id="nav_right">&nbsp;&gt;</span>
    </div>
    <div id="content">
        SOME CONTENT
    </div>
</div>
</body>
</html>

CSS (without fixed positioning)

#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%;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Give position:absolute to arrow classes and relative to the parent div #container

    #nav_left {
        left:0; position:absolute
}
#nav_right {
    right:0; position:absolute
}

    DEMO

    For Fixed Arrows

    Use a relative div inside the fixed div and align the child div by position:absolute

    HTML

    <div id="nav">
           <div id="wrap"> 
               <div id="nav_left">&lt;&nbsp;</div> <div id="nav_right">&nbsp;&gt;</div>
        </div>
</div>

    CSS

    #nav{position:fixed;  
    width:100%; 
    height:40px;
}
#wrap{
    position:relative; 
    width:100%; 
    height:40px;
}
#nav_left {
        left:15%;
    position:absolute
}
#nav_right {
    right:15%;
    position:absolute
}

    DEMO 2

    Or in simple method give direct position:fixed to the child divs and remove the outer divs

    HTML

    <div id="nav_left">&lt;&nbsp;</div> <div id="nav_right">&nbsp;&gt;</div>

    CSS

    #nav_left {
        left:15%;
    position:fixed
}
#nav_right {
    right:15%;
    position:fixed
}

    DEMO 3

    • 0