Float navigation bar to sides of image

Question

I have a navigation bar with a logo in the center of it. There are 6 buttons, 3 on the left and 3 on the right. What I am trying to do is get the buttons to stay next to the image, not on the far left and far right of page. Here is the code for the navigation bar.

  <img src="Pictures/ThaXGamingWaterMark.png" alt="Tha xGaming Clan" height="200" width="200">
   </div>
    <div class="navigationwide" bgcolor="#f1f1f1">
        <div align="center" bgcolor="#f1f1f1">
            <ul class="menu">
                <li class="home"><a href="#">Home</a>
                </li>
                <li class="about"><a href="#">About</a>
                </li>
                <li class="clanmembers"><a href="#">Clan Members</a>
                </li>
            </ul>
            <ul class="menu2">
                <li class="forum"><a href="#">Forum</a>
                </li>
                <li class="contact"><a href="#">Contact</a>
                </li>
                <li class="youtube"><a href="#">YouTube</a>
                </li>
            </ul>
        </div>
    </div>

CSS Code:

#
navigationwide {
    overflow: hidden;
    width: 100 % ;
    height: 42px;
    display: block;
    clear: both;
    border - top: 1px solid# C1CBD5;
    border - bottom: 1px solid# D5DBE1;
    background: -moz - linear - gradient(center bottom, #EFEFEF 9 % , #EFEFEF 50 % , #EFEFEF 98 % ) repeat scroll 0 % 0 % transparent;
}

.navtable {
    overflow: hidden;
    background: #f1f1f1 repeat scroll 0 0 red;
    margin: 0;
    padding: 0;
    left: 0;
    position: absolute;
    right: 0;
}
    .menu {
        position: static;
        margin - left: 100px;
        padding: 0;
        display: inline - block;
        list - style - type: none;
        background: #f1f1f1;
        float: left;
}
    .menu li {
        overflow: hidden;
        padding: 0;
        margin: 0;
        height: 32px;
        margin - right: 1em;
        list - style: none;
        background - repeat: no - repeat;
}
    .menu li a, .menu li a: visited {
        overflow: hidden;
        display: block;
        text - decoration: none;
        text - indent: -9999px;
        height: 32px;
        background - repeat: no - repeat;
}

.menu2 {
    position: static;
    margin - right: 100px;
    padding: 0;
    display: inline - block;
    list - style - type: none;
    background: #f1f1f1;
    float: right;
}
    .menu2 li {
        padding: 0;
        margin: 0;
        height: 32px;
        margin - right: 1em;
        list - style: none;
        background - repeat: no - repeat;
}
    .menu2 li a,
.menu li a: visited {
    display: block;
    text - decoration: none;
    text - indent: -9999px;
    height: 32px;
    background - repeat: no - repeat;
}

.home {
    background - image: url(Pictures / HomeButtonNavHover.png);
    width: 124px;
}
    .home a {
        background - image: url(Pictures / HomeButtonNav.png);
}

.about {
    background - image: url(Pictures / AboutNavHover.png);
    width: 124px;
}
    .about a {
        background - image: url(Pictures / AboutNav.png);
}

.clanmembers {
    background - image: url(Pictures / ClanMembersNavHover.png);
    width: 124px;
}
    .clanmembers a {
        background - image: url(Pictures / ClanMembersNav.png);
}

.forum {
    background - image: url(Pictures / ForumNavHover.png);
    width: 124px;
}
    .forum a {
        background - image: url(Pictures / ForumNav.png);
}

.contact {
    background - image: url(Pictures / ContactNavHover.png);
    width: 124px;
}
    .contact a {
        background - image: url(Pictures / ContactNav.png);
}

.youtube {
    background - image: url(Pictures / YouTubeNavHover.png);
    width: 124px;
}
    .youtube a {
        background - image: url(Pictures / YouTubeNav.png);
}
ul.menu li a: hover {
    background: none;
}
ul.menu2 li a: hover {
    background: none;
}
    .menu li {
        float: left;
}
    .menu: after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
    .menu2 li {
        float: right;
}
    .menu2: after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}

#
headerwide {
    position: relative;
    height: 125px;
    width: 100 % ;
    display: block;
    background: -moz - linear - gradient(center top, #036, # 25609C) repeat scroll 0 % 0 % transparent;
    clear: both;
    border - bottom: 1px solid #012251;
    border-top: 1px solid # 356FA9;
}

#
logo img {
    position: absolute;
    z - index: 2147483647;
    left: 50 % ;
    margin - left: -100px;
    text - align: center;
    top: 9px;
    float: inherit;
}

Answer 1

Here is an example of what you are trying to achieve add a container then divide with with menu-left and menu-right

and specify the positioning

.menu-left, .menu-right {
    width: 300px;
    height: 64px;
    position: absolute;
    top: 0;
}

.menu-left {
    left: 150px;
}

.menu-right {
    right: 150px;
}

then on the logo container tell it to be left:50% to be centered

http://jsfiddle.net/L2VrN/83/