CODEWITHSUNDEEP
htmlcss
codingwarrior
codingwarrior

Reputation: 49

How to make a fixed navigation bar stretch to the width of the browser?

I am trying to create a fixed horizontal navigation that stretches to the browser's width.The problem I am having is that the links in the navigation bar move when i resize the browser window. How can I make it so that when you resize the web browser, the links(Home, Services...) stay fixed to the right and vertically in-line with the #content.?

Here is my html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
</head>
<body>        
<!--Navigation-->
<div id="fixed_bar">
<div id="navigation">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="Services">Services</a></li>
        <li><a href="About">About</a></li>
        <li><a href="Contact">Contact</a></li>
    </ul>
</div>
</div>

<!--Content-->
<div id="content">
<!--Content-->
</div>

</body>
</html>

And my CSS:

body {
    background-color:yellow;
    color:black;
    width:100%;
    padding:0;
    margin-left:auto;
    margin-right:auto;
    font-size:16px;
    font-family:"Sans-Serif", Helvetica, Arial;
}

/*Navigation*/
#navigation {
   background-color:green;
   color:black;
   width:100%;
   height:60px;
   margin:0;
   padding:0;
   position:fixed;
  top:0;
  z-index:99;
}
#navigation ul {
    list-style:none;
    display:inline-block;
    margin:0;
    padding:0;
    float:right;
    overflow:hidden;
}
#navigation ul li{
    padding:10px;
    float:left;
    clear:right;
}
#navigation ul li a{
    background-color:inherit;
    color:black;
    vertical-align:middle;
    text-decoration:none;
    text-transform:uppercase;
    font-size:15px;
    font-family:"Lato", sans-serif;
    letter-spacing:1px;
    line-height:40px;
    clear:both;
}

/*Content*/
#content {
    padding-top:50px;
    margin:auto;
    width:900px;
    color:black;
    background-color:white;
}

I have been trying to solve this for hours, help would be much appreciated

Upvotes: 0

Views: 4102

Answers (3)

scooterlord
scooterlord

Reputation: 15349

set navigation styling:

left:0;
right:0;

Upvotes: 0

pablopixel
pablopixel

Reputation: 819

You can apply your actual #navigation CSS rules to your #fixed_bar div and give #navigation the same width of the content (900px), let the browser calculate the margins with automatic margins and align the text to the right, so the ul will be at the right of #navigation while you keep the background, etc in #fixed_bar.

See it here: http://jsbin.com/bibulewa/1

And this is the CSS I've modified:

#fixed_bar {
   background-color:green;
   color:black;
   width:100%;
   height:60px;
   margin:0;
   padding:0;
   position:fixed;
   top:0;
   z-index:99;
}

#navigation {
  width: 900px;
  text-align: right;
  margin: auto;
}

Upvotes: 1

Reza San
Reza San

Reputation: 230

Not sure if this is what you're looking for

  1. I gave the ul an absolute position and align to the right:2%.
  2. A top margin of 5px.
  3. Remove the float and display the list as inline-block

Here's a jsfiddle - http://jsfiddle.net/rezasan/kE7LK/

/*Navigation*/
#navigation {
background-color:green;
color:black;
width:100%;
height:60px;
margin:0;
padding:0;
position:fixed;
top:0;
z-index:99;
}
#navigation ul {
list-style:none;
position:absolute;
right:2%;
display:inline-block;
margin:5px;
padding:0;
overflow:hidden;
width:60%;
text-align:right;
}
#navigation ul li{
padding:5px;
display:inline-block;
}
#navigation ul li a{

background-color:inherit;
color:black;
vertical-align:middle;
text-decoration:none;
text-transform:uppercase;
font-size:15px;
font-family:"Lato", sans-serif;
letter-spacing:1px;
line-height:3px;
clear:both;
}

Upvotes: 0

Related Questions