Ben Nickless Ben Nickless - 1 month ago 9
CSS Question

How do I position these 4 elements as depicted below

I want to make it so the elements are like in a 2 by 2 square on a page but they just list as 4 in a line here is a JS fiddle.

https://jsfiddle.net/n2xscyr3/



.w3-card-4 {
box-shadow: 0 6px 6px 0;
}

.w3-container {
padding: 0.01em 16px
}

<div class="w3-container">
<h2>Contact us</h2>
<p>If you have any questions, complaints or feedback - feel free to contact the team at Potato&trade;.</p>
<div class="w3-card-4" style="width:15%">
<img src="" alt="face" style="width:100%">
<div class="w3-container">
<h4><b>Someone</b></h4>
<p>The title</p>
</div>
</div>
<br>
<div class="w3-card-4" style="width:15%">
<img src="" alt="face" style="width:100%">
<div class="w3-container">
<h4><b>Someone</b></h4>
<p>The title</p>
</div>
</div>
<br>
<div class="w3-card-4" style="width:15%">
<img src="" alt="face" style="width:100%">
<div class="w3-container">
<h4><b>Someone</b></h4>
<p>The title</p>
</div>
</div>
<br>
<div class="w3-card-4" style="width:15%">
<img src="" alt="face" style="width:100%">
<div class="w3-container">
<h4><b>Someone</b></h4>
<p>The title</p>
</div>
</div>
</div>





I have tried a couple of things but I cant figure it out. I am coding strictly for fun at the moment so I'm not very good at this sort of thing.

Answer

One way you can do this is by using float: left; and then using clear: left; on every odd child. Also in order for this method to work, you need to remove the <br> tags your have between each .w3-card-4.

JSFiddle

.w3-card-4 {
  box-shadow: 0 6px 6px 0;
  float: left;
}

.w3-card-4:nth-child(odd) {
  clear: left;
}

.w3-container {
  padding: 0.01em 16px
}
<div class="w3-container">
  <h2>Contact us</h2>
  <p>If you have any questions, complaints or feedback - feel free to contact the team at Potato&trade;.</p>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
</div>