dimanche 19 juin 2016

Add Space between multiple div horizontally

I tried many ways to see if i can get this fixed but is just wont do what i want it to do. I tried margins, padding, floating nothing will work i don't know what i am doing wrong but i would greatly appreciate if someone can show me how to add space between these divs without getting mixed up like this.

This testimonials have all this.

  1. Div id oc-testi That holds all the content.
  2. 1 div class called Testimonials. here is a picture to show you what i have and how it looks is a mess. I have set the width to be 450px because i like that size but as you can see the image that what i does goes on top of the other content. What is the easiest way to fix this.

DIV PROBLEM VIEW HERE

CSS Code for Testimonials

.testimonial {
  position: relative;
  color: #424242;
  width: 450px;
  letter-spacing: 0px;
  padding: 20px;
  border: 1px inset rgba(0, 0, 0, 0.28);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  opacity: .80;
  filter: alpha(opacity=60);
  /* For IE8 and earlier */
}

This is the HTML Code for the first testimonials

<div class="oc-item">
  <div class="testimonial">
    <div class="testi-image">
      <a href="#">
        <img src="images/testimonials/img3.jpg" alt="Customer Testimonails">
      </a>
    </div>
    <div class="testi-client">
      <p class="testi-client-verified">VERIFIED CLIENT</p>
    </div>
    <div class="testi-content">
      <p>The best airport car service in Houston. I wouldn't use any other. Their drivers are pleasant and professional. They arrive early for my pick-up and get me to the airport in great time. I recommend them highly.</p>
      <div class="testi-meta">
        John A Richardson
        <span style=" margin-left: -13px;">Senior Geoscientist</span>
        <div class="rating-testi">
          <img class="rating-testi" src="images/testimonials/rating_small.png" alt="">
          <span class="testi-ratings" style="margin-left: -13px;">5.0 out of 5.0</span>
          <div class="verified_check">
            <img class="checkmark" src="images/testimonials/small_check.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

The only problem I am having is adding that space in between each div or testimonials.

Aucun commentaire:

Enregistrer un commentaire