Raj Raj - 28 days ago 17
CSS Question

Zurb foundation margin between 2 columns

I am trying to put a padding/margin of 10 px between 2 columns. But when I do then the 2nd column breaks.

html code

<div class="row collapse">
<div class="large-6 medium-6 small-12 columns">Content 1</div>
<div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>


If I remove collapse then column adds padding to it's all direction. How can I make the row full width but only 10px padding or margin between 2 columns.

Any help is highly appreciated. Thanks in advance.

zan zan
Answer

We can't add margins to columns or the row would overflow, because the columns directly touch each other already.

You could try something like this:

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns space">Content 1</div>
   <div class="large-6 medium-6 small-12 columns space">Content 2</div>
</div>

and then CSS:

.space{
  padding: 10px; 
}

or you could use inner container for columns like this:

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns">
     <div class="panel">Content 1</div>
    </div>
   <div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>

and then style the panel class