Hi .I am having a problem with floating two ul's.One to the right and another to the left.

<div class="menu"> <div class="center-menu">

    <!-- menu left -->
    <ul class="menu-left">
        <li><a href="#"> Home</a></li>
        <li><a href="#"> Products</a></li>
        <li><a href="#"> About</a></li>
        <li><a href="#"> Pages</a></li>
        <li><a href="#"> Blog</a></li>
        <li><a href="#"> Contact</a></li>
    </ul><!-- end menu-left -->


    <!-- menu-right -->
    <ul class="menu-right">
        <li><a href="#"><img src="images/wish.png"/>
        <span>30</span></a>

        </li>
        <li><a href="#"><img src="images/miniCart.png"/>
        <span>0</span>
        </a>

        </li>
    </ul> <!-- end menu-right -->


</div> <!-- end center-menu -->

</div>

//css .menu { height: 60px; margin-top: 0 ; margin-left: 10px; } .center-menu { position: relative; width: 960px; margin: -28px auto; } .menu ul { list-style: none; /* margin-left: -40px; */ margin-top: 0; padding-left: 0;

} ul.menu-left { float: left;

border-right: 1px solid #eeeeee;
margin: 0;
padding: 0;

} ul.menu-left li { float: left;

} .menu-left li a { text-decoration: none; display: block; /* margin-top: -16px; / / margin-left: -40px; */ line-height: 60px; font-size: 16px; color: #242424; border-left: 1px solid #eeeeee; padding: 0 25px; } .menu-left li a:hover { background-color: #f5f5f5; color: #57c5a0; }

/* menu-right */

ul .menu-right { float: right; border-right: 1px solid #ccc; margin: 0; padding: 0; width: 960px; } .menu-right li { float: left;

/* margin-top: 0;*/
width: 70px;
height: 60px;

} .menu-right li a{ display: block; text-decoration: none; height: 60px; /* padding-right: 0 20px; / border-left: 1px solid #ccc; color :#6e6e6e; / padding-left: 22px; padding-right: 8px; */ padding: -1px 25px;

} .menu-right li a img { position: relative; top: 21px; margin-right: 5px;

width: 16px;
height: 13px;

} .menu-right li span { position: relative; top: 20px; width: 20px; height: 20px; display: inline-block; background-color: #adadad; border-radius: 4px; font-size: 12px; text-align: center; font-weight: bold; color: #fff; line-height: 15px;

}

ul .menu-right li:last-child a span{ background-color: #57c5a0; }