Two-column layout with vertically and horizontally alignment, having variable height - html

Question

I want to gain the below layout:
It seems that when the right box is small, the bottom left box wants to move away from the left side and beside the top left box. If the right box is full and tall, then it pushes the bottom left box back to where I want it to be.
HTML
<div class=page>
<div id="stack-vert">
<div id="stack-horz">
<div id="message_center_content">
<h2> Your Messages </h2>
</div>
<div id="message_center_details">
</div>
<div id="message_center_details">
</div>
<div id="clearingdiv2"></div>
</div>
</div>
CSS
.page{
margin: 2em auto;
width: 75em;
border: 5px solid #ccc;
padding: 0.8em; background: white; display:table;
}
#message_center_details{
float:left;
border: solid thin black;
overflow:hidden;
padding: 5px;
width: 25%;
background-color: #ffffcc;
margin: 5px;
}
#message_center_content{
float:right;
border: solid thin black;
padding: 5px;
width: 60%;
background-color: #F0F0F0;
margin: 5px;
}
JS Fiddle
It works in jsFiddle, but now in my browser! Instead the two boxes on the left interfere with each other, the bottom one sits to the right of the top one and below the box on the right.
Any help would be really appreciated.

Answer 1

Something you could do
<div id="Container">
<div id="left">
<div class="section">
</div>
<div class="section">
</div>
</div>
<div id="right">
<div id="message">
<div style="width:100px;height:260px;background:white;">Edit this</div>
</div>
</div>
</div>
#Container {
width: 100%;
min-height: 300px;
background: red;
}
#left {
float: left;
width: 40%;
background: yellow;
min-height: 300px;
box-sizing: border-box;
padding: 10px;
}
.section {
width: 100%;
display: block;
min-height: 120px;
background: red;
box-sizing: border-box;
margin-bottom: 10px;
}
#right {
float: left;
width: 60%;
min-height: 300px;
background: blue;
box-sizing: border-box;
padding: 10px;
}
#message {
width: 100%;
min-height: 200px;
background: red;
}
see fiddle for what i would do. I have added colors so you can see whats happening.
adjust the white div height in the HTML tab to see the message div (the red one on the right) adjust its height.
Your content would just go inside the left divs with a class of section, and the right div id message.
I would stay away from libraries until you know how to do most things yourself.
Great place to learn html/css/js and more

Answer 2

You are maybe after such a solution to have two outer divs side-by-side:
.wrapper{
width: 90%;
margin: auto;
display: flex;
justify-content: space-between;
}
.side{
width: 30%;
}
.side div{
margin-bottom: 10px;
padding: 10px;
}
.side div:last-child{
margin-bottom: 0;
}
.main{
width: 67%;
}
.main div{
padding: 10px;
}
.border{
border: 2px solid black;
}
<div class="wrapper">
<div class="side">
<div class="top border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
<div class="bottom border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
<div class="main">
<div class="border">
<p>These are contents. These are contents. These are contents. </p>
<p>These are contents. These are contents. These are contents. </p>
</div>
</div>
</div>