Fixed position navigation bar width and overlap issue

Question

Hello fellow community members,

I am currently having a problem where I have set my top navigation bar to be fixed so that it follows users as they scroll down my web page but I am currently faced with two issues.

1. The content of my site is overlapping my navigation bar and goes ontop of it making it look messy and not function as designed. (The background is not transparent but rather a solid image)

2. The website is fluid and I have been fiddling with this for hours now trying to get it to work but as I set a min-width and max-width it doesn't seem to obey the min-width and width as a percentage (100% of the container). Sorry if I am a little unclear in explaining this but I have attached some code in jsfiddle for people to see.

If you would like to see where I am stuck at right now you can do so at subnovaled.com (the blue bar along the top) also the jsfiddle link is as follows:

    #navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
    background: cyan;
    }

http://jsfiddle.net/jXJMx/23/ Note: the above code was done in a rush, sorry

Thank you to anyone who is able to help me out!!

Answer 1

check this fiddle:

http://jsfiddle.net/jXJMx/26/

CSS:

 #navMainWrapper {
    height: 32px;
    font-size: 12px;
    position: fixed;
    min-width: 750px;
    max-width: 1280px;
    width: 100%;
    background: cyan;
}
#navMainSearch {
    float:left;
    width:120px;
}

#navMain {
    float:left;
    width:750px;
    line-height:normal;
    height:32px;
}
#navMain ul {
    float:right;
    list-style:none;
}
#navMain li {
    display:inline;
}
#navMain a {
    float:left;
    text-decoration:none;
}
#navMain a span {
    float:left;
    display:block;
    padding: 7px 15px 0 15px;
    text-align:center;
    width:90px;
    cursor:pointer;
    height:25px;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
    float:none;
}
/* End IE5-Mac hack */

#navMain a:hover {
    background-position:0% -32px;
}
#navMain a:hover span {
    background-position:100% -32px;
}
#content {
    background:yellow; 
    min-width:750px;
    width:100%;
    height:768px;
    position:relative;
    margin-top:32px;
}

Answer 2

Update CSS as show

#navMainWrapper {
height: 32px;
font-size: 12px;
position: fixed;
min-width: 1000px;
max-width: 1280px;
width: 100%;
    background: cyan;
}
#navMainSearch {
float:left;
width:120px;
}

#navMain {
float:left;
line-height:normal;
height:32px;
}
#navMain ul {

list-style:none;
}
#navMain li {
display:inline;
}
#navMain a {
float:left;
text-decoration:none;
}
#navMain a span {
float:left;
display:block;
padding: 7px 15px 0 15px;
text-align:center;
/*width:90px;*/
cursor:pointer;
height:25px;
}
 /* Commented Backslash Hack hides rule from IE5-Mac \*/
#navMain a span {
float:none;
}
/* End IE5-Mac hack */

#navMain a:hover {
/*  background-position:0% -32px;*/
}
#navMain a:hover span {
/*  background-position:100% -32px;*/
}
#content {
background:yellow; 
width:100%;
float:left;
height:1500px;
}