How do I align mixed-size divs within a container? - html

Question

Updated based on comments
I'm trying to create div sections on a full sized page by making containers that are 30% of the width. Within those, I plan to have 2 or 3 div sizes aligned within them. I have a row with a large box that occupies 100% of the height, and a portion of the width, and then a box that's exactly half of the size. I'd like to have all of those half-size boxes be in the same row as the larger box to create a nice stack. I'm assuming it's an issue of size vs position, but I haven't had much luck and I'm over-thinking the issue.
Fiddle: https://jsfiddle.net/as9hud4k/10/
HTML:
<div class="content_section">
<div class="content_thirdsize">
<div class="content_thirdsize_inner_row">
<div class="content_thirdsize_inner_large"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
<div class="content_thirdsize_inner_small"> </div>
</div>
</div>
</div>
CSS:
.content_thirdsize
{
width: 500px;
height: 500px;
display: inline-block;
text-align: center;
vertical-align: top;
background-color: rgba(83, 35, 128, 0.2);
}
.content_thirdsize_inner_row
{
width: 500px;
height: 105px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
margin: 2px;
}
.content_thirdsize_inner_large
{
position: relative;
width: 100px;
height: 100px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: left;
}
.content_thirdsize_inner_small
{
position: relative;
width: 50px;
height: 50px;
display: inline-block;
background-color: rgba(83, 35, 128, 0.2);
border: 1px dashed #000;
vertical-align: right;
}

Answer 1

I suspect the math may need to be tweaked to account for spacing but flexbox can do a lot of the work here.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
section {
display: flex;
margin: auto;
}
.content-wrap {
display: flex;
flex-wrap: nowrap;
padding: 5px;
background: orange;
}
.small-wrap {
display: flex;
flex-wrap: wrap;
width: 350px;
}
.large,
.small {
width: 100px;
height: 100px;
background: rebeccapurple;
border: 2px dotted white;
}
.small {
width: 50px;
height: 50px;
}
<section>
<div class="content-wrap">
<div class="large"></div>
<div class="small-wrap">
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div>
<div class="small"></div </div>
</div>
</section>
Codepen Demo

Answer 2

I would recommend using position and then align the divs using left, right, top, bottom. Pick a position setting that makes sense in your mind for moving the div and then fiddle with it's position until they line up as you would like.
As paulie_D said in the comments don't use IDs multiple times, they are supposed to be unique. You want to be using a class to apply the same style on multiple objects. My general rule is that classes are for applying style and IDs are for identifying a specific object on the page.