Как организовать divs, которые вложены внутри друг друга?

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 в исходном коде.

.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>

Answer 2

Место #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/