Мой div идет дальше вниз по меню вкладок в приложении asp.net mvc2

Question

Я делаю несколько пользовательских вкладок в asp.net.Я также использую jquery, однако я переопределяю внешний вид вкладки по умолчанию.Я столкнулся с небольшой проблемой, когда элемент div ( # right-side ), который я разместил после неупорядоченного списка, появляется ниже после информации, связанной с вкладкой.

Пожалуйста, посмотрите на диаграмму ниже:

В левой части # У меня есть левая часть кривой меню изатем в .tab-menu у меня есть повторяющееся 1-пиксельное изображение и, наконец, в # на правой стороне у меня есть правая часть кривой моего меню, НО это выглядит как вниз , к левой стороне кнопки save .

Любые идеи сделать изображение в фактическом # правом появляются в #правая сторона (должна появиться) позиция.

Спасибо

Вот мой код:

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><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>

---

связанный css для # правой стороны

#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;
}

Answer 1

Пожалуйста, посмотрите: Форматирование DIV

Если вы не нашли это полезным, пожалуйста, исправьте меня.

Спасибо.

Здесь

InnerDiv1 = # левая сторона
InnerDiv2 = # правая сторона
InnerDiv3 = .tab-menu

Answer 2

Ладно, ребята, я использовал абсолютное позиционирование только для этой # правой стороны дел.Ниже показан CSS, который я использовал:

#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;
}

Спасибо за чтение: -)