Add Space between multiple div horizontally

Question

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.

Div id oc-testi That holds all the content.
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.

i think some part of css and html is missing..can you add it — Naga Sai A, Jun 18 '16 at 23:41
i have used codepen and tried with same one testimonial section-http://codepen.io/nagasai/pen/ZOpeea Added disiplay:inline-block ...hope this works — Naga Sai A, Jun 18 '16 at 23:43
The part causing the trouble obviously is outside on a higher level than the element/s you posted. Either provide a link to the whole website or post the html and CSS code here — Johannes, Jun 18 '16 at 23:45
The answers here will help: http://stackoverflow.com/questions/33984424/how-do-i-automatically-add-spacing-between-divs-without-using-percentage?rq=1 — Niraj Agarwal, Jun 18 '16 at 23:52
There isn't yet enough info, but already 4 answers, Oh boy... — dippas, Jun 18 '16 at 23:54
Here i added the whole code html and the CSS hope this can help i tried all the answers here nothing even moved but i really appreciate that ya trying to help out. https://jsfiddle.net/6x6pktet/ — Eden, Jun 19 '16 at 01:39

neer · Answer 1 · 2016-06-19T00:19:42.810

0

I do not know that you try it But you should set a margin.

UPDATED

.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 */
 margin-left: 10px;

}

edited Jun 19 '16 at 00:19

answered Jun 18 '16 at 23:47

neer

4,031
6
20
34

I believe that one of these is not letting the job get done but all containers are set to be boxed in my index page which thats how i set it up to look, something has to work with this to allow the boxes expand without getting mixed up like that. This div class holds everything
– Eden Jun 19 '16 at 01:42
Check chrome debugging also @Eden – neer Jun 20 '16 at 05:53

score 0 · Answer 2 · answered Jun 18 '16 at 23:48

without knowing the complete code it's hard to say, but the problem seems to be that your three fixed-width .testimonial-divs don't fit into their (too narrow) parent container.

A quick fix would be to set their width to 33% (and add box-sizing: border-box), but probably you'll need some more fine-tune to get a satisfying result.

score 0 · Answer 3 · answered Jun 18 '16 at 23:49

0

To achieve your expected result, use below CSS

  .oc-item .testimonial{
             margin-right:15px/*controls space between testimonials*/
        }

Codepen for reference-http://codepen.io/nagasai/pen/ZOpeea

answered Jun 18 '16 at 23:49

Naga Sai A

10,771
1
21
40

Add Space between multiple div horizontally

3 Answers3