CSS将两个div放在另一个旁边

Question

我正在尝试使用div构建模板。

顶部div宽度为100％，没问题。

在左侧和右侧的下方，一个小的div都是200px 在主要容器之间，两个柱子都是剩下的50％。

我的问题是这两个列的大小是视口的50％，所以第二列放在主视图下。

HTML：

<div id="top">
    <div class="but">top 1234</div>
    <div class="but">top 5678</div>
    <div class="but">top 91011</div>
    <div class="but">top 121314</div>
</div>
<div id="middle">
    <div id="butsRight">
        <div class="butv">right1234</div>
        <div class="butv">right567</div>
        <div class="butv">right8910</div>
    </div>
    <div id="butsLeft">
        <div class="butv">left1234</div>
        <div class="butv">left5678</div>
        <div class="butv">left91011</div>
    </div>
    <div id="middleMain">
        <div id="middleMainL">
            <div id="middleMainLb">LEFT QQQQQ
                <br>CCCCC
                <br>hhhhhh</div>
            <div id="middleMainLm">
                <table width=100% height=100% border=2>
                    <tr>
                        <td>&nbsp;&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                </table>
            </div>
            <div id="middleMainLo">LEFT
                <p>eee</p>
                <p>fff</p>
                <p>ggg</p>
                <p>hhh</p>
            </div>
        </div>
        <!--middleMainL -->
        <div id="middleMainR">
            <div id="middleMainRb">RIGHT QQQQQ
                <br>CCCCC
                <br>hhhhhh</div>
            <div id="middleMainRm">RIGHT
                <p>aaaa</p>
                <p>bbbb</p>
                <p>cccc</p>
                <p>dddd</p>
                <p>aaaa</p>
                <p>bbbb</p>
                <p>cccc</p>
            </div>
            <div id="middleMainRo">RIGHT
                <p>eee</p>
                <p>fff</p>
                <p>ggg</p>
                <p>hhh</p>
            </div>
        </div>
        <!--middleMainR -->
    </div>
    <!-- middlemain -->
</div>
<!-- middle -->

CSS：

body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
#top {
    margin-right: 80px;
    background-color: green;
    width: 100%;
    text-align: center;
}
.middle {
    width: 100%;
    height: 100%;
    background-color: yellow;
}
#butsLeft {
    height: 100%;
    width: 200px;
    float: left;
    background-color: green;
}
#butsRight {
    height: 100%;
    width: 200px;
    float: right;
    background-color: green;
}
#middleMain {
    background-color: gray;
    width:100%;
    height:100%;
}
#middleMainL {
    width:50%;
    float: left;
    background-color: black;
}
#middleMainR {
    width:auto;
    float: left;
    background-color: brown;
}
#middleMainLb {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainLm {
    width: 100%;
    float: center;
    background-color: purple;
    text-align: center;
    overflow: visible;
}
#middleMainLo {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainRb {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
#middleMainRm {
    width: 100%;
    float: center;
    background-color: purple;
    text-align: center;
}
#middleMainRo {
    width: 100%;
    float: center;
    background-color: green;
    text-align: center;
}
div.but {
    text-align: center;
    width: 200px;
    background-color: orange;
    position: absolut;
    display:inline-block;
}
div.butv {
    text-align: center;
    width: 200px;
    background-color: orange;
    position: absolut;
    height: 33%;
}

Answer 1

我不知道为什么会这样做，但这就是你想要的（也许？因为我真的不明白这个问题）

http://jsfiddle.net/KTd8T/1/

当你做你的css时，你正在做一些。例子，例子是div。如果它是一个div，请放#，如果它是一个类“。”

现在您可以处理此副本，并尝试编写清晰的代码。

还有一点：你正在做一个顶级和中级内容，但你没有底层内容。也许这就是为什么它不像你想要的那样显示？

感谢您修改帖子并尝试更明确！

Answer 2

是的，我稍微看了一下，这就是我提出来的。请仔细研究一下以理解代码。它相当直接。

HTML：

<div id="header">Header</div>
<div id="right">Right Side Bar: Fixed width.</div>
<div id="left">Left Side Bar: Fixed width.</div>
<div id="content">
    <div>
        <div id="middleleft">Middle Left</div>
    </div>
    <div>
        <div id="middleright">Middle Right</div>
    </div>
</div>

CSS：

html, body {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
* {
    box-sizing:border-box;
}
#header {
    width: 100%;
    height: 100px;
    background: red;
}
#right, #left {
    width:200px;
    height: 500px;
    float:left;
    background:orange;
}
#right {
    float:right;
}
#content {
    overflow:hidden;
    height: 500px;
}
#content > div {
    width: 50%;
    height: 100%;
    float:left;
}
#middleleft {
    float:left;
    height:100%;
    width:100%;
    background: blue;
}
#middleright {
    float:left;
    height:100%;
    width:100%;
    background: green;
}

DEMO HERE