Fixed position nav bar replacement - html

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

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.

Answer 3

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 4

to arrive to your purpose you can try this code :
.divClass{
position:fixed;
top: 0px;
z-index: 99;
width: 80% /*for responsible width*/
}