I am working with a 16 grid system where I have two 8 column divs positioned side by side. In one of the 8 column divs, I am trying to include a 5 column div on the left and two three columns divs stacked on top of each other on the right. I have tried various methods such as floating elements and clear fixes, but I can't seem to get it to work. The grid system I am using is Skeleton. Below is the current HTML & CSS code. Any assistance would be greatly appreciated!
<div class="container">
<article id="main">
<div class="eight columns">
<section class="five columns bulletin alpha">
<h2>Bulletin Board</h2>
<p>Post 1</p>
</section>
<div class="clear"></div>
<aside class="three columns take5 omega">
<ul>
<li><h3>Take 5</h3></li>
<li><a href="#"><img src="http://placehold.it/75x75" alt="Learning Break icon" /></a></li>
<li><h3>Learning Break</h3></li>
</ul>
</aside>
<aside class="three columns longTerm omega">
<ul>
<li><h3>Long Term</h3></li>
<li><a href="#"><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></a></li>
<li><h3>Learning</h3></li>
</ul>
</aside>
</div>
The CSS style applied is as follows:
.bulletin {
margin: 0;
padding: 0;
width: 100%;
float: left;
}
.take5, .longTerm {
margin: 0;
width: 100%;
padding: 0;
float: right;
}