Check out the code snippet below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content">
<div class="row">
<div class="left-frame large-3 medium-3 hide-for-small columns">
<header class="icon-bar five-up" role="navigation">
<a class="item"><i class="fa fa-info-circle"></i></a>
<a class="item"><i class="fa fa-info-circle"></i></a>
<a class="item"><i class="fa fa-info-circle"></i></a>
<a class="item"><i class="fa fa-info-circle"></i></a>
<a class="item"><i class="fa fa-info-circle"></i></a>
</header>
<div class="side-nav">
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
<li><a href="#">q</a></li>
</div>
<footer class="pagination-centered">
<ul class="pagination">
<li class="arrow unavailable"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="arrow"><a href="#">»</a></li>
</ul>
</footer>
</div>
<div class="content large-9 medium-9 small-12 columns">
<div class="row">
<div class="large-3 medium-3 small-12 columns">q</div>
<div class="large-6 medium-6 small-12 columns">q</div>
</div>
<div class="row">
<div class="large-3 medium-3 small-12 columns">q</div>
<div class="large-6 medium-6 small-12 columns">q</div>
</div>
</div>
</div>
</div>My goal is to have 3 to 9 grids on the page, but the second column is nesting inside the first. Here's an image for reference: https://i.sstatic.net/adrY8.png
Why is this happening? I specifically want the second column to be in its own place.
Possible Solutions Attempted
#1: Reduce the Second Column Size
I tried shrinking the second column to 8 grids, and it now works perfectly. It's odd though, as this makes the total grid count 11.
Environment Details
- Foundation 5.5.3