Horizontal divs

Question

Have a page with a menu bar on the bottom using 3 horizontal divs on top of 7 horizontal divs. Have them positioned center on a 1024px width page. The top three all float left and all have left margins. The same is true for the bottom 7. Each div is a link.
The difficulty I am having is the spacing of both bars. The top two on the left are where I want them to be. Tried a margin-left: 70px for the third from left and it jumps to the second line. The largest number is margin-left: 26px.
The bottom menu items have no spaces between them. However, to center all I would like margin-left: 114px for the left most div. Once again the is no number that works to get the last div on the same row.
The page in question is: http://kellymaglia.com/test/links.html
This is the first page with all divs. When this works out all(?) of the tables will be converted.
Thanks.

Answer 1

Okay, I'm back. New theory: float the Facebook to the right and allow the rest of the content (before the navigation) to flow up to the left:
#links_pic     { }
#facebook {float: right;margin-top: 72px;margin-right: 20px;}
#kmphoto     {margin-top: 26px;}
#abennett {margin-top: 42px;}
#bespun     {margin-top: 42px;}
#upartists     {margin-top: 46px;}
#menubar     {width: 838px;margin: 25px auto 0;}
/*large menu*/
#couture     {width: 220px;float: left;}
#dancewear     {width: 286px;float: left;margin-left: 60px;}
#theatre     {width: 200px;float: left;margin-left: 60px;}
/*small menu items*/
#menuitems {width: 816px;margin: 0 auto;}
#shop     {float: left;width: 91px;}
#noslip     {width: 114px;float: left;}
#contact     {width: 136px;float: left;}
#home     {float: left;width: 124px;}
#faq     {float: left;width: 104px;}
#policies     {float: left;width: 124px;}
#links     {width: 103px;float: left;}
.clear {clear: both;}
BASIC CONSTRUCTION ORDER:
#container. Notice that I have added overflow: hidden; to the rule definition. This will force the background of #container to enclose all the menubar divs.
#links_pic (as now)
#facebook. Notice that it now floats to the right with a top and a right margin. Using a negative positioning as you had breaks in several browsers. Better to insert Facebook first and let the other content flow up to its left.
#kmphoto. Notice that it only has a margin-top and does not float, because it does not need to.
#abennett. Same
#bespun. Same
#upartists. Same
#menubar. Added to your margin-top: 25px; is margin-left and margin-right: auto (expressed margin: 25px auto 0;)
#couture. Now floats left with no additional margin-left.
#dancewear. Floats left with a margin-left
#theatre. Floats left with a margin-left
.clear only clears items on both sides and keeps the smaller menuitems from moving up into the large item menu
#menuitems. Width 816px; margin: 0 auto; centers inside parent element (#container).
items here; they have width and float: left;
Here's a wireframe of the html:
     <DIV id="container">
          <DIV id="links_pic">image</DIV><!--end links_pic-->
      <DIV id="facebook">
                 <!-- Facebook Badge START -->facebook badge<!-- Facebook Badge END -->
      </DIV><!--end facebaook--> 
  <DIV id="kmphoto">image/link</DIV>
          <DIV id="abennett">image/link</DIV>
        <DIV id="bespun">image/link</DIV>
      <DIV id="upartists">image/link</DIV>
<DIV id="menubar">
             <DIV id="couture">image/link</DIV>
            <DIV id="dancewear">image/link</DIV>
            <DIV id="theatre">image/link</DIV>
            </DIV><!--end menubar-->
        <div class="clear"></div>
<DIV id="menuitems">
            <DIV id="shop">image/link</DIV>
            <DIV id="noslip">image/link</DIV>
            <DIV id="contact">image/link</DIV>
            <DIV id="home">image/link</DIV>
            <DIV id="faq">image/link</DIV>
            <DIV id="policies">image/link</DIV>
            <DIV id="links">image/links</DIV>
            </DIV><!--end menuitems-->
</DIV><!--end container-->
Beth