I've been working on achieving the following design:
https://i.sstatic.net/ckC3j.png
Just to clarify, the dashed line represents a guide indicating that both .inner-a and .inner-b are aligned in the middle horizontally and vertically within the imaginary split of .outer.
Do you think this layout can be accomplished using only CSS, or would it require some JavaScript intervention?
This is what I have so far:
HTML
<div class="outer">
<div class="inner-a"></div>
<div class="inner-b"></div>
</div>
CSS
.outer {
width: 300px;
height: 300px;
}
.inner-a, .inner-b {
width: 100px;
height: 100px;
}
.inner-a {
float:left;
}
.inner-b {
float: right;
}