浮动div的布局不正确

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

试试这个：

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

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

已编辑：使用您自己的宽度来适合您的设计。

Answer 2

如何在HTML中交换左侧上方的右侧div：

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