I'm trying place a horizontal navigation bar on top of my div="wrapper" but i'm having difficulty getting it to display correctly in box firefox and ie. Also, whenever the text increases size, the navigation buttons get larger and mess up the rest of the page. I was wondering how i could have them stay the same size. Here's my relevant html:

<div class="navbarwrap">
<div id="horbar">
<ul>
<li><a href="subfolder/features.html">Features &amp; Benefits</a></li>
<li><a href="subfolder/FAQ.html">FAQ</a></li>
<li><a href="subfolder/reimbursement.html">Reimbursement</a></li>
<li><a href="subfolder/warranty.html">Warranty</a></li>
<li><a href="subfolder/comments.html">Customer Comments</a></li>
<li><a href="subfolder/hints.html">Helpful Hints</a></li>
<li><a href="subfolder/Order.html">Order Online</a></li>
</ul>
</div>
</div>

<div id="wrapper">

<div id="maincontent">

<div class="box1">
<div id="img1"><img src="images/advan.jpg" alt="Using the brace" /></div>
<div class="pstyle">
<p>
info
</p>
</div>
</div>

<br class="clear" />

<div class="box2">
<div id="img2"><img src="images/589.jpg" alt="Picture of the Brace" /></div>
<div id="ul1">
<ul>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>

<br class="clear" />

<div class="box3">
<div id="img3"><img src="images/580.jpg" alt="Brace on a Foot" /></div>
<div id="ul2">
<ul>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>

<br class="clear" />

<div class="box4">
<div id="img4"><img src="images/tennis.jpg" alt="Girl playing tennis in brace" /></div>
<div id="ul3">
<ul>
<li>info</li>
<li>info</li>
<li>info</li>
</ul>
</div>
</div>

<br class="clear" />

</div>
</div>

Here's my relevant CSS:

body {
background-color: blue;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
min-width: 760px;
}

.navbarwrap {
background-color: blue;
margin: 0 auto;
width: 75%;
text-align: left;
}

#wrapper {
background-color: white;
margin: 0 auto;
width: 75%;
text-align: left;
border: black solid;
}

#img1 img {
float: left;
width: 200px;
margin: -5px 5px 5px -5px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
position: relative;
display: block;

}

#img1 {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
margin: 15px 30px 15px 15px;
position: relative;
}

#img2 img {
float: left;
width: 200px;
margin: -5px 5px 5px -5px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

#img2 {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
margin: 15px 30px 15px 15px;
}

#img3 img {
float: left;
width: 200px;
margin: -5px 5px 5px -5px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

#img3 {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
margin: 15px 30px 15px 15px;
}

#img4 img {
float: left;
width: 200px;
margin: -5px 5px 5px -5px;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

#img4 {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
margin: 15px 30px 15px 15px;
}

ul {

padding: 60px 20px 0px 20px;
}

.pstyle p {

padding: 50px 20px 0px 20px;
}

#horbar {
;
}

#horbar ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}

#horbar ul li {
float: left;
background: url(images/tab-right.gif) no-repeat top right;
font-weight: bold;
}

#horbar a {
display: block;
padding: 0px 10px;
line-height: 30px;
text-decoration: none;
background: url(images/tab-left.gif) no-repeat top left;
float: left;
}

.clear {
clear: both;
}

I'm fairly new to web development, so i'm sure there is some/a lot of extra unnecessary markup. Any suggestions would be very helpful. Thanks.