Плавающий макет divs выходит неправильно

Question

Я хотел бы разделить содержимое, отображаемое в макете MVC3 по умолчанию, следующим образом:

<div id="main">
            <div id="left">
                @RenderBody()
            </div>    
             <div id="right">
             Feeds  here!
             </div>

        </div>

но так становится Вот части в CSS я исправил

#main #left
{
    float:left; 
}

#main #right
{
    position:fixed;
    padding-right:50px;
    right:10px;
    text-align:left;
}

#main {
    padding: 30px 30px 15px 30px;
    background-color:Black;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    clear:both;    

    color:White;
}

Answer 1

Как насчет замены правого делителя над левым в HTML:

<div id="main">
    <div id="right">
        Feeds  here!
    </div>
    <div id="left">
        @RenderBody()
    </div>
</div>

Тогда для css:

#main #left
{
}

#main #right
{
    float:right;
    padding-right:50px;
    right:10px;
    text-align:left;
}

Answer 2

Попробуйте:

#main #left
{
    float:left; 
    width:600px;
}

#main #right
{
    padding-right:50px;
    text-align:left;
    width:200px;
    float:right;
}

Отредактировано: используйте ширину, соответствующую вашему дизайну.