My container won't go in its parent container - css

Question

I am trying to get the black box to go into the blue box.
As far as I know, the black box is in the same container as the red box; therefore the black box is suppose to be in the blue box.
http://codepen.io/VK72m/pen/yMJLRZ
/* Containers */
main.container {
height: 40em;
width: 70%;
top: 5em;
background-color: orange;
}
section.bluebox {
height: 10em;
width: 100%;
background-color: blue;
}
figure.redbox {
height: 10em;
width: 24%;
margin: 0;
padding: 0;
background-color: red;
}
summary.blackbox {
height: 10em;
width: 62%;
margin: 0;
padding: 0;
background-color: black;
}
/* Styles */
summary.blackbox p {
color: white;
padding: 0;
margin: 0;
}
<main class="container">
<section class="bluebox">
<figure class="redbox">
<p> FIGURE </p>
</figure>
<summary class="blackbox">
<p> SUMMARY </p>
</summary>
</section>
</main>

Answer 1

According to the current HTML Standard on <figure> element:
The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.
which is intepreted by most browsers and, more importantly, by the widely used ones as:
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Having a display of block will make it occupy 100% of width and push every other "block level item", such as <summary> on a new line. Below.
There are multiple ways you can achieve the desired result. However, doing it with the least amount of code would be
figure {float: left}
main.container {
height: 40em;
width: 70%;
top: 5em;
background-color: orange;
}
section.bluebox {
height: 10em;
width: 100%;
background-color: blue;
}
figure.redbox {
height: 10em;
width: 24%;
margin: 0;
padding: 0;
background-color: red;
}
summary.blackbox {
height: 10em;
width: 62%;
margin: 0;
padding: 0;
background-color: black;
}
/* Styles */
summary.blackbox p {
color: white;
padding: 0;
margin: 0;
}
figure {float: left;}
<main class="container">
<section class="bluebox">
<figure class="redbox">
<p> FIGURE </p>
</figure>
<summary class="blackbox">
<p> SUMMARY </p>
</summary>
</section>
</main>
If you wanted to have the red and black boxes fill the blue one, I personally recommend flexbox, but it's strictly a matter of personal preference (there are multiple other ways to achieve it):
section {
display: flex;
}
section > figure, section > summary {
flex-grow: 1;
}
.container {
min-height: 100vh;
width: 70%;
background-color: orange;
}
.bluebox {
min-height: 10em;
width: 100%;
background-color: blue;
}
.redbox {
width: 24%;
max-width: 24%;
background-color: red;
}
.blackbox {
background-color: black;
}
figure, summary, body {
margin: 0;
padding: 0;
}
p {
padding: 0 1rem;
}
/* Styles */
.blackbox p {
color: white;
}
section {
display: flex;
}
section > figure,
section > summary {
flex-grow: 1;
}
* {
box-sizing: border-box;
}
<main class="container">
<section class="bluebox">
<figure class="redbox">
<p> FIGURE </p>
</figure>
<summary class="blackbox">
<p> SUMMARY </p>
</summary>
</section>
</main>
In this last example, I took the liberty to interpret your intentions and re-code your CSS into what I believe to be best practices, making as few assumptions as possible.
Please note it's not production ready, it should be prefixed before deploying.

Answer 2

Divs are block elements, so they naturally go to their own line. You can apply float:left; to both the red and black box to fit inside the blue box.