Menu icon Foundation
Rows don't clear?

I was looking to have a .row inside of a .row so that the .row could act as a wrapper for multiple columns. This worked great, but when I went to add a background inside of the inner row, it bleeds over into the top row - is this normal behavior?

I have attached a screenshot and the code I am using.

<div class="row" id="banner" >

    <div class="large-12 medium-12 columns" style="background:green;">
		<h1>Banner/Top</H1>
	</div>
	
	<div id="bio" class="row"  style="background:red;"  >
		<div class="large-6 medium-6 columns" >
			<h1>LEFT</H1>
		</div>	
		<div class="large-6 medium-6 columns" >
			<h1>RIGHT</H1>
		</div>
	</div>
	
</div>

Screen shot 2014 01 21 at 8.51.46 pm

clear fixRows

I was looking to have a .row inside of a .row so that the .row could act as a wrapper for multiple columns. This worked great, but when I went to add a background inside of the inner row, it bleeds over into the top row - is this normal behavior?

I have attached a screenshot and the code I am using.

<div class="row" id="banner" >

    <div class="large-12 medium-12 columns" style="background:green;">
		<h1>Banner/Top</H1>
	</div>
	
	<div id="bio" class="row"  style="background:red;"  >
		<div class="large-6 medium-6 columns" >
			<h1>LEFT</H1>
		</div>	
		<div class="large-6 medium-6 columns" >
			<h1>RIGHT</H1>
		</div>
	</div>
	
</div>

Screen shot 2014 01 21 at 8.51.46 pm
Karl Ward almost 6 years ago

Your logic is slightly off-target, because a row should basically always be superseded by a set of columns. A row should never be a direct child of another row ... A row is always a wrapper for columns, regardless. In your case, the above can be written like this:

<div id="banner">
    <div class="row">
        <div class="large-12 medium-12 columns" style="background:green;">
            <h1>Banner/Top</H1>
        </div>
    </div>
    <div id="bio" class="row"  style="background:red;"  >
        <div class="large-6 medium-6 columns" >
            <h1>LEFT</H1>
        </div>  
        <div class="large-6 medium-6 columns" >
            <h1>RIGHT</H1>
        </div>
    </div>   
</div>

You could remove the container div tag with id "banner", but I assume you want to wrap it all inside this container. Optionally, if you insist on having a wrapper row for some reason, it would look like this:

<div class="row" id="banner">
    <div class="large-12 medium-12 columns">
        <div class="row">
            <div class="large-12 medium-12 columns" style="background:green;">
                <h1>Banner/Top</h1>
            </div>
        </div>
        <div id="bio" class="row"  style="background:red;"  >
            <div class="large-6 medium-6 columns" >
                <h1>LEFT</h1>
            </div>  
            <div class="large-6 medium-6 columns" >
                <h1>RIGHT</h1>
            </div>
        </div>
    </div>
</div>

The two examples above have the same result, and do not bleed background, because rows are defined correctly. The style attribute is set inconsistently set above, because in your case you have set it on a columns element, then a row ...
row > columns > row > columns > row > columns