Fixed position nav bar replacement

Question

I try to use the

position:fixed;
width:10in;

but when resize the browser, the contents go out of boundary(there's no way to reach those elements).

i need an alternative because i want the nav bar to be at top at all times.

edit: i also want the contents to be inline which is not served by using

width:100%;
display:inline or inline-block

check here - http://jsfiddle.net/dF4Bx/1/

In simple language -

I need that the browser should provide a horizontal bar if the width is not fullfilled by the resized window.

Answer 1

Making your top bar sticky with CSS

#header{
   position:fixed;
   left:0px;
   top:0px;
   height:30px;
   width:100%;
   background:#999;
}

Answer 2

Try with below CSS,

position:fixed;
top:0;
width:100%;
z-index:99;

8In is such a big value and moreover it is fixed width that's why it keeps going beyond browser. Use % values for responsive designs.

So change width like this

div.back div.front {
width:100%;
}

then about keeping the elements inline,

Use something like margin-left:20% instead of 24In in padding:24px 20px 24px 2in!important; .

Even it will break the line when it reaches a limited browser window. You can reduce this range by avoiding larger fixed values of padding and width in your code.

Check Fiddle: FIddle

Answer 3

to arrive to your purpose you can try this code :

.divClass{
  position:fixed;
  top: 0px;
  z-index: 99;
  width: 80% /*for responsible width*/
}

Answer 4

I see what's your problem.

Use this HTML instead of yours:

<div class="back">
        <div id="header" class="front">
            <ul>
                <li>Home</li>
                <li style="float: right;">Login</li>
                <li style="float: right;">Register</li>
                <li style="float: right;">Search: <input type="text" class="textbox" name="sr"></li>

            </ul>
        </div>
    </div>

And put this rule into your CSS:

#header ul li {
    margin-right: 7px;
}

And too, change this width 8in to 95% :

div.back div.front {
    background-color: #0072C6 !important;
    margin: auto;
    width: 95%;
}

Note that i removed the inline style padding of search element.