Undesired Column Layout HTML/CSS

Question

I have a CSS layout problem. In the Portfolio section of my site @ 763px breakpoint I want 3 rows with 2 columns in each of them. I have that.

[.col] [.col]
[.col] [.col]
[.col] [.col]

But from 926px - 978px my columns break up and then i get 4 rows like this:

[.col] [.col]
[.col]
[.col] [.col]
[.col]

Why is this happening? And what is the solution? Thank you.

  main { margin: 55px 0px -30px 0px; background: linear-gradient(transparent, rgba(102, 194, 255, 0.4) 10%, transparent 99%); padding-bottom: 5rem; } h2 { text-align: center; margin: 5rem 0; font-size: 1.6rem; } h3 { color: #353535; font-size: 1.3rem; margin: 1.2rem 0; } .col { width: 100%; text-align: center; margin-bottom: 15px; } .col p { width: 90%; margin: 0 auto; } .col img { width: 95%; } /*====== 768px ==== */ @media (min-width: 768px) { .wrapper { padding: 10px 20px 0px 20px; } main { width: 100%; } .col { float: left; width: 47%; margin-left: 1.5%; margin-right: 1.5%; display: inline-block; text-align: center; vertical-align: top; } .col h3 { font-size: 1.5rem; } drag to resize 

 <main> <h2 id="portfolio">Portfolio</h2> <!-- first row --> <div class="row-content clearfix"> <div class="col"> <img src="images/portfolio-1.png"> <h3>Marketing Page</h3> <p>This project shows the front page of a marketing webiste meant for a specific business I'm interested in.</p> </div> <div class="col"> <img src="images/portfolio-2.png"> <h3>Search Page</h3> <p>This project searches through a specific database to find information that the user is trying to lookup.</p> </div> <div class="col"> <img src="images/portfolio-3.png"> <h3>Travel App</h3> <p>This project compares travel times based on different transportation methods and tells you the best.</p> </div> <!-- second row --> <div class="col"> <img src="images/portfolio-4.png"> <h3>Map of Favorite Sports</h3> <p>This project uses mapping apps to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p> </div> <div class="col"> <img src="images/portfolio-5.png"> <h3>Photo Gallery</h3> <p>This project shows pictures from a recent trip to the viewer and allos them to easily navigate through photos.</p> </div> <div class="col"> <img src="images/portfolio-6.png"> <h3>Calculator</h3> <p>Somone can enter in the numbers they want and press the big blue button and get the result.</p> </div> </div> </main> drag to resize 

Answer 1

Your problem is that one of the divs is higher than the other, then, the float logic will place the third div to the left of the first div. If you'll add borders, you'll see it more clearly. Since the first div is higher than the second, the third div still a place to be float to the first div.

If you'll give them fixed height it will solve the problem.

BUT, I suggest using a different layout. Flex for example:

Add to container:

.row-content{
   display: flex;
   flex-wrap: wrap;
}

and for each col :

flex-grow: 1;
flex-basis: 47%;
flex-shrink: 0;

 main { margin: 55px 0px -30px 0px; background: linear-gradient(transparent, rgba(102, 194, 255, 0.4) 10%, transparent 99%); padding-bottom: 5rem; } h2 { text-align: center; margin: 5rem 0; font-size: 1.6rem; } h3 { color: #353535; font-size: 1.3rem; margin: 1.2rem 0; } .row-content{ display: flex; flex-wrap: wrap; } .col { flex-grow: 1; flex-basis: 47%; flex-shrink: 0; text-align: center; margin-bottom: 15px; } .col p { width: 90%; margin: 0 auto; } .col img { width: 95%; } /*====== 768px ==== */ @media (min-width: 768px) { .wrapper { padding: 10px 20px 0px 20px; } main { width: 100%; } .col { float: left; width: 47%; margin-left: 1.5%; margin-right: 1.5%; display: inline-block; text-align: center; vertical-align: top; } .col h3 { font-size: 1.5rem; } drag to resize 

 <main> <h2 id="portfolio">Portfolio</h2> <!-- first row --> <div class="row-content clearfix"> <div class="col"> <img src="images/portfolio-1.png"> <h3>Marketing Page</h3> <p>This project shows the front page of a marketing webiste meant for a specific business I'm interested in.</p> </div> <div class="col"> <img src="images/portfolio-2.png"> <h3>Search Page</h3> <p>This project searches through a specific database to find information that the user is trying to lookup.</p> </div> <div class="col"> <img src="images/portfolio-3.png"> <h3>Travel App</h3> <p>This project compares travel times based on different transportation methods and tells you the best.</p> </div> <!-- second row --> <div class="col"> <img src="images/portfolio-4.png"> <h3>Map of Favorite Sports</h3> <p>This project uses mapping apps to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p> </div> <div class="col"> <img src="images/portfolio-5.png"> <h3>Photo Gallery</h3> <p>This project shows pictures from a recent trip to the viewer and allos them to easily navigate through photos.</p> </div> <div class="col"> <img src="images/portfolio-6.png"> <h3>Calculator</h3> <p>Somone can enter in the numbers they want and press the big blue button and get the result.</p> </div> </div> </main> drag to resize 

Answer 2

I couldn't repro this error between the given resolution but my best hunch is due to the difference in the text content. Try doing the same with the same text content for the description and it should be alright. If that's the case, you have to add a min-height to the inconsistent text-content.

.col p {
  width: 90%;
  margin: 0 auto;
  min-height: 100px;
}