html - 调整大小的简单布局问题

Question

在我处理的整个页面中，我不断收到重复的布局错误，该错误源于试图将元素左右浮动以使其彼此一致。但是，在调整大小的浏览器和小型浏览器上，float:right 元素每次都会折叠在 float:left 元素下。

http://jsfiddle.net/g4dbr3ho/4

    #wrap {
        width: 100%;
        height: 100%;
    }

#main {
    float:left;
    max-width: 70%;
    max-height: 100%;
    margin-left:112px;
    padding: 20px;
}
#side {
    float:right;
    width:auto;
    max-height:100%;
    background-color:black;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

我正在寻找的是了解哪种方法最适合尝试执行此格式。我也知道格式化中的 inline:block 策略，但我发现这对我这里的情况没有影响，还会产生新问题。

Answer 1

您应该围绕#main 文本创建一个div。将那个 float 到左边，给它一个宽度和你的侧边栏。

*{
    box-sizing: border-box;
}

我已经为所有添加了 box-sizing。它包括宽度和高度的边框和填充。

http://jsfiddle.net/qmd9shu0/1/