Menu icon Foundation
Spacing between panels

Hi, I am wondering if anyone can advise.

I have a div containing 3 panels that are horizontally aligned. Presently each panel is positioned up against the prev / next one.

I need to add spacing between each panel. Is this possible by just using Foundation classes?

See code below.

Any advice welcome.

Many thanks.

<div id="homepage-about">

    <h2 class="text-center">Popular Features</h2>

	<section id="about-cutandfill" class="row small-10 medium-8 large-6">

		
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>

			
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>
			
		
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>
        
    </section>
    
    
</div>

Screen shot 2014 08 17 at 08.51.05

panelslayout

Hi, I am wondering if anyone can advise.

I have a div containing 3 panels that are horizontally aligned. Presently each panel is positioned up against the prev / next one.

I need to add spacing between each panel. Is this possible by just using Foundation classes?

See code below.

Any advice welcome.

Many thanks.

<div id="homepage-about">

    <h2 class="text-center">Popular Features</h2>

	<section id="about-cutandfill" class="row small-10 medium-8 large-6">

		
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>

			
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>
			
		
		<p class="panel small-12 medium-4 large-4 columns text-center">content here</p>
        
    </section>
    
    
</div>

Screen shot 2014 08 17 at 08.51.05
Asif over 4 years ago

you could adjust your code with the following:

<div id="homepage-about">

    <h2 class="text-center">Popular Features</h2>

  <section id="about-cutandfill" class="row small-10 medium-8 large-6">


    <div class="small-12 medium-4 large-4 columns text-center"><p class="panel">content here</p></div>


    <div class="small-12 medium-4 large-4 columns text-center"><p class="panel">content here</p></div>


    <div class="small-12 medium-4 large-4 columns text-center"><p class="panel">content here</p></div>

    </section>


</div>

Here is a codepen, let me know if this helps

http://codepen.io/asif999/pen/bIGBx

you could also check out the templates in here and use them as starting point for your layouts:

http://foundation.zurb.com/templates.html

barry over 4 years ago

Hi Asif,

Thanks that worked a treat.

Michael about 3 years ago

this worked until I tried to add a button. The button breaks the container. any thoughts?

<div class="large-6 columns" >
   <p class="panel">            <h3> Personal Checking </h3>
  <ul>
    <li>This is Feature 1</li>
    <li>This is Feature 2</li>
    <li>This is Feature 3</li>
  </ul>

  <div class="large-3 columns group">
  <button class="btn" type="button">Select</button>
  </div>
    </p>
</div>

Bart McLeod almost 3 years ago

I think it breaks because the div is a block level element and p is not. Looking for the same solution and found your post here, no luck so far.