Undesired Column Layout HTML/CSS
1
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 resizehtml css css3 layout
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
add a comment |
1
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 resizehtml css css3 layout
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
add a comment |
1
1
1
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 resizehtml css css3 layout
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
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 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 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 resizehtml css css3 layout
html css css3 layout
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
edited Nov 14 '18 at 9:47
Itay Gal
7,76552559
7,76552559
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
asked Nov 13 '18 at 16:49
j_nguyenj_nguyen
308
308
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
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 resizeanswered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
add a comment |
1
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;
}
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285843%2fundesired-column-layout-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
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 resizeanswered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
add a comment |
2
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 resizeanswered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
add a comment |
2
2
2
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 resizeanswered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
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 resizemain {
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 resizemain {
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 resizeanswered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
edited Nov 13 '18 at 18:03
answered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
answered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
answered Nov 13 '18 at 17:03
Itay GalItay Gal
7,76552559
7,76552559
add a comment |
add a comment |
1
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;
}
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
add a comment |
1
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;
}
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
add a comment |
1
1
1
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;
}
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
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;
}
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
answered Nov 13 '18 at 16:52
Praveen Kumar PurushothamanPraveen Kumar Purushothaman
132k23135183
132k23135183
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53285843%2fundesired-column-layout-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
