My div goes further down the tab menus in asp.net mvc2 application

I am making some custom tabs in asp.net. I am also using jquery, however I am overriding the default tab look. I ran into a small problem where a div(#right-side) I placed after an unordered list appears further down after the information related to a tab.

Please look at the diagram below :

In the #left-side I have my left curve section of the menu and then in .tab-menu I have a repeating 1 pixel picture and finally at #right-side I have the right curve section of my menu BUT it appears way down, towards the left side of the save button.

Any ideas to make the picture in the Actual #right-side appear in the #right-side(supposed to appear) position.

Thanks

Here is my code:

html

<div id="tabs">
    <div id="left-side">
    </div>
    <ul class="tab-menu">
            <li><a href="<%= Url.Action("GetHomeTab", "Home") %>" class="a"><b>
                <div id="home" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="dates-and-location" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="tariff" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetHomeTab", "Home") %>" class="a"><b>

            <div id="customer-information" class="menu">
            </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="rates-and-charges" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="payments-and-vouchers" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="delivery-and-collection" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="general" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="equipment-and-other-drivers" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="vehicle-information" class="menu">
                </div>
            </b></a></li>
            <li><a href="<%= Url.Action("GetContactUsTab", "Home") %>" class="a"><b>
                <div id="customer-preferences" class="menu">
                </div>
            </b></a></li>
            <li>开发者_如何学JAVA;<a href="<%= Url.Action("GetProductTab", "Home") %>" class="a"><b>
                <div id="customer-statistics" class="menu">
                </div>
            </b></a></li>      

    </ul>
    <div id="right-side">
            </div>
</div>

related css for the #right-side

#tabs #right-side
{
background-image: url('../Content/images/right_side.png');
background-repeat: no-repeat;
background-position: right 8px;
height: 50px;
width: 7px;
float: left;
}

Please have a look : Formatting DIVs

If you don't find it useful then please correct me.

Thank you.

Here,

InnerDiv1 = #left-side
InnerDiv2 = #right-side
InnerDiv3 = .tab-menu

Alright folks, I used absolute positioning only for this #right-side div. Shown below is the CSS I have used :

#tabs #right-side
{
background-image: url('../Content/images/right_side.png');
background-repeat: no-repeat;
background-position: right 8px;
position:absolute;
height: 50px;
width: 7px;
float: left;
top: 3px;
left: 670px;
}

Thanks for reading :-)