Question

I am currently trying to get a horizontal navigation menu to stretch from across the whole of my container.

The div that it is in stretches across fine, but the actual list items don’t and I am unsure why.

The CSS for the right hand bar, the container holding the nav bar, and the nav items is:

#rhs{
position: relative;
float: right;

height: 720px;
width: 200px;

background-color: #3D0099;
border-left:2px solid #616161;
}

nav{
display: block;
position: relative;

width: 1010px;
height: 50px;

margin-left: 7px;

background-color: #F0F0F0;

border-top: 1px solid #616161; 
border-bottom: 1px solid #616161; 

z-index: 99999;
 }

 nav li{
list-style: none;
display: inline;

margin-left: 10px;

z-index: 99999;
}

The full jsfiddle: http://jsfiddle.net/zDzLs/

Any ideas?

Answer 1

Change css of rhs div to:

#rhs{

position: absolute;
right:0px;
height: 720px;
width: 200px;
background-color: #3D0099;
border-left:2px solid #616161;
}