How to add spacing between two rows of multiple divs each


Tags: html,css

Problem :

I am trying to figure out how to add a space between the upper row of 4 divs and the lower row of 4 divs.

HTML:

<div class="container">
        <!-- freshdesignweb top bar -->
        <div class="freshdesignweb-top">
            <a href="#" target="_blank">Home</a>
            <span class="right">
                <a href="#">
                    <strong>Back to the freshdesignweb Article</strong>
                </a>
            </span>
            <div class="clr"></div>
        </div><!--/ freshdesignweb top bar -->
        <header>
            <h1><span>Tutorials</span>Demo CSS Table Price Hosting Plan</h1>
        </header>       
 <!-- start header here-->
<header>
<div id="fdw-pricing-table">
<div class="plan plan1">
    <div class="header">Enterprise</div>
    <div class="price">$59</div>  
    <div class="monthly">per month</div>      
    <ul>
        <li><b>10GB</b> Disk Space</li>
        <li><b>100GB</b> Monthly Bandwidth</li>
        <li><b>20</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>         
</div>
<div class="plan plan2">
    <div class="header">Professional</div>
    <div class="price">$29</div>
    <div class="monthly">per month</div>  
    <ul>
        <li><b>5GB</b> Disk Space</li>
        <li><b>50GB</b> Monthly Bandwidth</li>
        <li><b>10</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>            
</div>
<div class="plan plan3">
    <div class="header">Standard</div>
    <div class="price">$19</div>
    <div class="monthly">per month</div>
    <ul>
        <li><b>3GB</b> Disk Space</li>
        <li><b>25GB</b> Monthly Bandwidth</li>
        <li><b>5</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>        
</div>
<div class="plan plan4">
    <div class="header">Basic</div>
    <div class="price">$9</div>
    <div class="monthly">per month</div>
    <ul>
        <li><b>1GB</b> Disk Space</li>
        <li><b>10GB</b> Monthly Bandwidth</li>
        <li><b>2</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>        
</div>
<div class="plan plan1">
    <div class="header">Enterprise</div>
    <div class="price">$59</div>  
    <div class="monthly">per month</div>      
    <ul>
        <li><b>10GB</b> Disk Space</li>
        <li><b>100GB</b> Monthly Bandwidth</li>
        <li><b>20</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>         
</div>
<div class="plan plan2">
    <div class="header">Professional</div>
    <div class="price">$29</div>
    <div class="monthly">per month</div>  
    <ul>
        <li><b>5GB</b> Disk Space</li>
        <li><b>50GB</b> Monthly Bandwidth</li>
        <li><b>10</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>            
</div>
<div class="plan plan3">
    <div class="header">Standard</div>
    <div class="price">$19</div>
    <div class="monthly">per month</div>
    <ul>
        <li><b>3GB</b> Disk Space</li>
        <li><b>25GB</b> Monthly Bandwidth</li>
        <li><b>5</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>        
</div>
<div class="plan plan4">
    <div class="header">Basic</div>
    <div class="price">$9</div>
    <div class="monthly">per month</div>
    <ul>
        <li><b>1GB</b> Disk Space</li>
        <li><b>10GB</b> Monthly Bandwidth</li>
        <li><b>2</b> Email Accounts</li>
        <li><b>Unlimited</b> subdomains</li>            
    </ul>
    <a class="signup" href="#">Sign up</a>        
</div>  
</div>
</header><!-- end header -->

</div>

CSS:

#fdw-pricing-table {
    margin:0 auto;
    text-align: center;
    width: 928px; /* total computed width */
    zoom: 1;
}

#fdw-pricing-table:before, #fdw-pricing-table:after {
  content: "";
  display: table
}

#fdw-pricing-table:after {
  clear: both
}

/* --------------- */   

#fdw-pricing-table .plan {
    font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
    background: #fff;      
    border: 1px solid #ddd;
    color: #333;
    padding: 20px;
    width: 180px;
    float: left;
    _display: inline; /* IE6 double margin fix */
    position: relative;
    margin: 0 5px;
    -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
    box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);      
}

#fdw-pricing-table .plan:after {
  z-index: -1; 
  position: absolute; 
  content: "";
  bottom: 10px;
  right: 4px;
  width: 80%; 
  top: 80%; 
  -webkit-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);   
  -moz-box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
  -webkit-transform: rotate(3deg);    
  -moz-transform: rotate(3deg);   
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);  
}   

#fdw-pricing-table .popular-plan {
    top: -20px;
    padding: 40px 20px;   
}

/* --------------- */   

#fdw-pricing-table .header {
    position: relative;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 40px;
    margin: -20px -20px 20px -20px;
    border-bottom: 8px solid;
    background-color: #eee;
    background-image: -moz-linear-gradient(#fff,#eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
    background-image: -webkit-linear-gradient(#fff, #eee);
    background-image: -o-linear-gradient(#fff, #eee);
    background-image: -ms-linear-gradient(#fff, #eee);
    background-image: linear-gradient(#fff, #eee);
}

#fdw-pricing-table .header:after {
    position: absolute;
    bottom: -8px; left: 0;
    height: 3px; width: 100%;
    content: '';
    background-image: url(images/bar.png);
}

#fdw-pricing-table .popular-plan .header {
    margin-top: -40px;
    padding-top: 60px;      
}

#fdw-pricing-table .plan1 .header{
    border-bottom-color: #B3E03F;
}

#fdw-pricing-table .plan2 .header{
    border-bottom-color: #7BD553;
}

#fdw-pricing-table .plan3 .header{
    border-bottom-color: #3AD5A0;
}

#fdw-pricing-table .plan4 .header{
    border-bottom-color: #45D0DA;
}           

/* --------------- */

#fdw-pricing-table .price{
    font-size: 45px;
}

#fdw-pricing-table .monthly{
    font-size: 13px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #999;
}

/* --------------- */

#fdw-pricing-table ul {
    margin: 20px 0;
    padding: 0;
    list-style: none;
}

#fdw-pricing-table li {
    padding: 10px 0;
}

/* --------------- */

#fdw-pricing-table .signup {
    position: relative;
    padding: 10px 20px;
    color: #fff;
    font: bold 14px Arial, Helvetica;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;       
    background-color: #72ce3f;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;     
    text-shadow: 0 -1px 0 rgba(0,0,0,.15);
    opacity: .9;       
}

#fdw-pricing-table .signup:hover {
    opacity: 1;       
}

#fdw-pricing-table .signup:active {
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;
    box-shadow: 0 2px 2px rgba(0,0,0,.3) inset;       
}           

#fdw-pricing-table .plan1 .signup{
    background: #B3E03F;
}

#fdw-pricing-table .plan2 .signup{
    background: #7BD553;
}

#fdw-pricing-table .plan3 .signup{
    background: #3AD5A0;
}

#fdw-pricing-table .plan4 .signup{
    background: #45D0DA;
}   

/* end --------------- */


Solution :

You are using margin: 0 5px; in #fdw-pricing-table .plan selector.
Instead you can add bottom or top margin to have some space. Like so -

#fdw-pricing-table .plan {
    margin: 10px 5px;
}

DEMO


    CSS Howto..

    How to create a div filling the vertical available space without overlapping the containing div?

    how to convert this site to a mobile site or make it liquid?

    How to get CSS height value (rather than calculated height) in jQuery

    How to do valid CSS for li text and li text with image?

    How to show a background image over foreground image using CSS

    How to center two square blocks in page?

    How to create a label inside an element and style it?

    How to scroll a page or a element using css

    How to apply “-webkit” css rules using jquery .css

    How do I keep my background image at the bottom of the page?

    How to define a good convention for css?

    How to Jump-Start PhoneGap App Development [closed]

    How to make an inline-element to occupy space above and below itself within a text using CSS?

    How to write different HTML for different screen sizes

    How to make two divs side by side using inline-block?

    Some doubts about how exactly grid BootStrap component work? [closed]

    Show hidden image with jQuery

    How to make top and bottom of div triangle with CSS?

    How to fade out after hover is done using CSS

    How do you observe the width of an element in polymer?

    How to insert the number into the bottom right of each page by TWIG and CSS

    How to indent text in a select drop down menu using CSS

    scrollbars not showing in google chrome

    How can I make a button change its position after being clicked?

    Difference in css position IE/FF, how to solv my problem?

    How automatically adjust div's width using CSS?

    How to apply css, after Jquery adds a class?

    How to hide CSS background images that use !important

    How do I resize an image in IE 8

    Hovering over item in WordPress list of pages shows Featured Image