如何组织彼此嵌套的div？

Question

这是我想要实现的布局，但我遇到了Main Body和Side Box的问题。我遇到的问题是Main Body完全在Side Box之下，而不是在上图中应该如何（围绕Side Box）。

在使用CSS布局技术方面，是否有人能够引导我朝着正确的方向前进？

到目前为止，这就是我所做的

HTML

<div class="main">
    <div class="header">
        <h2>Header</h2>
    </div>
    <div class="sidebox">
        <h2>Side box</h2>
    </div>
    <div class="body">
        <p>Body</p>
    </div>
</div>

CSS

div.main {
   width: 40%;
}

div.header {
   width: 100%;
   position: absolute;
}

div.sidebox {
   float: right;
   width: 30%;
   height: 50%;
}

div.body {
   float: left;
}

Answer 1

将#sidebox放在#main内，然后应用float: right

div { padding: 1em; }

#header { border:2px solid red; }

#main { border: 2px solid lightblue; overflow: auto; }

#side { float: right; border:2px solid orange; }

<div id="header">Header</div>
<div id="main">
  <div id="side">Side Box</div>
  Main body
</div>

jsFiddle：https://jsfiddle.net/azizn/8kjjh2u6/

Answer 2

您可以尝试将侧边框元素浮动到右侧。

此处的关键是.sidebox元素出现在源代码中的.main元素之前。

.title {
  background-color: yellow;
}
.sidebox {
  width: 25%;
  background-color: gray;
  float: right;
}

<h1 class="title">The title goes here</h1>
<div class="sidebox">The side box text. Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. </div>
<div class="main">  
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>  
<p>Donec adipiscing, lorem non euismod venenatis, diam orci tincidunt magna, ut interdum magna arcu vel elit. Nunc molestie lacus non urna eleifend mattis. Praesent ipsum nulla, tempor malesuada lacinia quis, elementum et tellus.</p>
</div>