Marco Marco - 3 months ago 7
CSS Question

How to make my table cells to wrap inside the parent container

I want my table cells to fit inside the container. In other words, I want my cells to wrap around the parent container. For some reason, the keep going and going, no wrapping whatsoever...

JSFIDDLE

https://jsfiddle.net/yLfpjqum/

HTML

<h1>TEST TABLE</h1>

<div class="colAB">
<div>
<p>menu goes here...</p>
</div>
<div>
<div class="table">
<div class="row">
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
<div class="cell"><img src="" width="125" height="125" alt=""></div>
</div>
</div>
</div>
</div>


CSS

.table {
display: table;
}

.row {
display: table-row;
}

.cell {
display: table-cell;
}

.colAB {
width: 70%;
margin: auto;
background-color: red;
}

.colAB > div:nth-child(1) {
float: left;
width: 300px;
background-color: black;
}

.colAB > div:nth-child(2) {
margin-left: 300px;
background-color: yellow;
}

Answer

That's the expected behavior, and even fits with your class names: everything in a "row" should be in one row.

But it's easy to get the effect you're going for: just add float:left to the cells:

.cell {
  width: 125px;
  height: 125px;
  float: left;
  border: 1px solid #ccc;
}
<div class="grid">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

(Note that I've left out your display styles and your row, since they aren't a necessary part of the answer)

Comments