JordanBarber JordanBarber - 2 months ago 5
CSS Question

Full Width dropdowns under grid parents

What is the best method to have a full width dropdown under a grid element. My grid is set up for each item to be 25% width and the items are floated. When they are clicked, a child item (the description) will unfold underneath the row of its parent and needs to push the other grid items down. I am having trouble with making this happen. My grid is set up as follows:

<div class="wrapper" id="content">

<div class="quarter">
<div class="inner">
<div class="wrap">
</div><!--end icon-wrap-->
</div><!--end inner-->
</div><!--end quarter-->

<!-- and then 30 more "quarter" instances



I am easily able to set up a child that is full width inside of each 'quarter' div, but how can I get it to push the rest of the grid down and not break the grid?

Here's a fiddle...


add this to your css code

 .quarter:nth-child(4n+1){clear: both;}