Question

I would like to divide the content rendered in the default MVC3 layout like this

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

        </div>

but it becomes like this

Here are parts in the CSS I fixed

#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

How about swapping the right div above the left in the HTML:

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

Then for the css:

#main #left
{
}

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