CODEWITHSUNDEEP
htmlcsszurb-foundation
Raj
Raj

Reputation: 1437

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.

Upvotes: 1

Views: 1921

Answers (2)

mwebster
mwebster

Reputation: 1

This can be accomplished without using custom css by nesting grids. Can be done with collapsed or uncollapsed columns.

<div class="section-container">
<div class="row uncollapse section-wrapper">
 <div class="columns small-6 section-column-wrapper">
   <div class="row collapse">
    <div class="columns small-12">
        Left Column Text
    </div>
   </div>
  </div>
<div class="columns small-6">
  <div class="row collapse section-column-wrapper">
      <div class="columns small-12">
           Right Column Text
      </div>
     </div>
   </div>
  </div>

https://codepen.io/michaelwebster/pen/KXerOx

Upvotes: 0

Afsar
Afsar

Reputation: 3124

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

Upvotes: 5

Related Questions