xHTML/CSS - Width Issue

I was hoping one of you might be able to see a work around to this stretching problem...

http://www.epicfrag.com/index2.html

 

change your code on style.css (line 137) to match this:

.navigation ul {
float:left;
margin:0;
padding:0;
position:absolute;
}

 

Right, so that "fixes" it, but it doesn't align the list items correctly, any suggestions on that one?

 

A quick way to fix it from what I can see is to put the whole nav bit:

<div class="navigation">
                        <ul>
                        	<li><a href="#">home</a></li>

                            	<li class="seperator">&middot;</li>
                            <li><a href="#">community</a></li>
                            	<li class="seperator">&middot;</li>
                            <li><a href="#">league</a></li>
                            	<li class="seperator">&middot;</li>
                            <li><a href="#">forums</a></li>
                            	<li class="seperator">&middot;</li>

                            <li><a href="#">network</a></li>
                            	<li class="seperator">&middot;</li>
                            <li><a href="#">admin</a></li>
                            	<li class="overlay"><!-- --></li>
                            <li id="search">Let's test the search list item.</li>
                        </ul>
                  </div>

                        
                    <span class="border"><!-- --></span>
                </div>

Code (markup):

Just after the wrapper div tag instead of before.

 

Where do you want the items to align? left or right or ? How am I suppose to know that?

 

The navigation div is inside of the wrapper not before. Also, how the code is structure you can see that I want the list items to be aligned at the start of the content but continue indefinitely to the right side of the page.

 

The navigation is NOT inside the wrapper, just look at your own code. It is inside a container div that you have set to a width of 100%, which defeats the object of a container. Either move your navigation to after the wrapper, or give your container a width and margin-left: auto and margin-right: auto and put text-align: center for the body for some versions of Internet explorer, and text-align:left for the container to counteract the body text-align:center.

 

I guess you guys can't see, to understand what I want...thanks anyway.