James Paterson James Paterson - 4 months ago 9
HTML Question

Positioning HTML Boxes In a Downwards Facing Triangle

I've received an... unusual request from a client, and that is to position the courses that they offer in a downwards facing triangle. Diagram below:

X X X X
X X X
X X
X


Where X is one of the boxes. I've done this with some row classes and offset (below) but I'm now thinking that there might be an easier way to do this, as it's not exactly an accessible layout (All the pixel values and offsets are hard coded). I'm looking for some insight as to how you would position the boxes responsively or an easier way to achieve what I've done below.



.item {
text-align: center;
width: 260px;
float: left;
box-sizing: border-box;
padding: 10px;
}

.item button {
float: right;
}

.row {
width: 100%;
clear: both;
}

.offset {
position: relative;
}

.offset-1 {
left: 130px;
}

.offset-2 {
left: 260px;
}

.offset-3 {
left: 390px;
}

<div class="row">
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
</div>
<div class="row offset offset-1">
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
</div>
<div class="row offset offset-2">
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
</div>
<div class="row offset offset-3">
<div class="item">
<h3>Title</h3>
<img src="http://dummyimage.com/250x200/000/fff.png">
<button>Some button</button>
</div>
</div>




Answer

The offset classes are not necessary.

Set text-align: center on the rows and display: inline-block on the items and you're good to go.

Updated Codepen


If you need this to be responsive, you could use flexbox

.row {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: space-around;
}
.item {
  text-align: center;
  width: 260px;
  box-sizing: border-box;
  padding: 10px;
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
}
img {
  width: 20vw;;
  height: 16vw;
}

.item button {
  display: block;
  margin-top: 10px; 
}
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>
<div class="row">
  <div class="item">
    <h3>Title</h3>
    <img src="http://dummyimage.com/250x200/000/fff.png">
    <button>Some button</button>
  </div>
</div>

Updated Codepen (flexbox)

Comments