CSS float layout is uneven when responsive

Question

I've created a 3x2 grid using media queries. It displays fine in its default view, on a desktop. When on mobile it becomes a 2x3 grid but there's a problem when there's a different amount of text in each one. I've added a margin to the bottom of item so that they don't touch the row below.

If you run the code below, all seems to be fine. My issue is when there's different lengths of text, the grid is broken and each row isn't aligned correctly.

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

Running the code is fine when it looks like this:

But the rows aren't even when there's different text lengths;

Any ideas on how to make all of these rows the same height as the largest one in each row on mobile (or another fix) would be appreciated.

`float` is awkward to work with. You might want to try CSS Grid as it's built for this: https://css-tricks.com/snippets/css/complete-guide-grid/ — user2740650, May 25 '20 at 02:44
@user2740650, it's written already so a fix for the code provided or easy implementation would be appreciated — learningtoanimate, May 25 '20 at 02:45

score 2 · Accepted Answer · answered May 25 '20 at 04:58

You should use 'clear' to solve this issue look at the my answer below. it will work fine

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

// add this part
.item:nth-child(3n + 1) {
 clear: both;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
}

// add this part
.item:nth-child(3n + 1) {
 clear: none;
}

.item:nth-child(2n + 1) {
 content: "";
 clear: both;
 display: table;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

This works but does eventually break @Webdevsmart. If more text is added the layout is eventually not respected and one column can take more than 50%. Setting a `max-width` only gives a quarter — learningtoanimate, May 25 '20 at 22:27
Can i see your target site? If then, I could give you more correct answer. In fact, we don't use float property now, current trend is to use display flex. it's very attractive css property — , May 26 '20 at 06:56

score 1 · Answer 2 · answered May 25 '20 at 02:56

I've found a workaround, and it's definitely not how this should be done but it works as a fix for now, giving them all the same height.

.wrap {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width: 500px) {
.wrap {
    width: 90%;
    margin-left: auto;
    nargin-right: auto;
}
}

.container {
    display: table;
    width: 100%;
}

.item {
    width: 33.3%;
    float: left;
    margin-bottom: 10px;
}

@media only screen and (max-width: 500px) {
.item {
    width: 50%;
    float: left;
    margin-bottom: 15px;
    height: 150px;
}
}

.item-info {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.item-icon{
    width: 50px;
    height: 50px;
    background: url(https://via.placeholder.com/50x50) bottom no-repeat;
    background-size: contain;
    margin-left: auto;
    margin-right: auto;

<div class="wrap">
   <div class="container">
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
      <div class="item">
         <div class="item-icon"></div>
         <div class="item-info">
            <h1>Title</h1>
            <p>A short paragraph goes here</p>
         </div>
      </div>
   </div>
</div>

CSS float layout is uneven when responsive

2 Answers2