Why is flex-direction: row rendering items in a column? - html

Question

Hope someone can shed light on this question of mine.
I have a flex container, which has 2 flex containers with flex-direction: column.
However, it all displays in 1 column.
Initially, it displayed in 2 columns but did not start at the same height, and now it is in one column only.
Advise here will be appreciated.
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 350px;
margin-bottom: auto;
margin-left: 50px;
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
margin-bottom: auto;
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
```
<!-- ***** finding container ***** -->
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications. Each week, we'll send you a fresh batch of hand-picked, personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>

Answer 1

I have a flex container, which has 2 flex containers with flex-direction: column.
You've got an invalid comment in your CSS, which is breaking your first line of code:
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content:space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
That's HTML commenting syntax. In CSS, it's invalid, so the following section.finding-container selector is seen as an error and ignored. The container then falls back to its default layout model, display: block, which stacks child elements vertically. (You can see the proper CSS commenting syntax at the bottom of your rule.)
More details about CSS commenting syntax and error handling:
Why are some of my CSS rules not working?
Initially, it displayed in 2 columns but did not start at the same height ...
You've got all sorts of margins and alignment properties (such as justify-content) set on the items and container, so they're rendering at different heights.
section.finding-container {
/* top: 180px; */
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
/* align-items: center; */
border: 2px dashed red; /* for illustration purposes */
padding: 10px; /* for illustration purposes */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* margin-top: 350px; */
/* margin-bottom: auto; */
/* margin-left: 50px; */
border: 1px solid green; /* for illustration purposes */
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
/* margin-bottom: auto; */
border: 1px solid black; /* for illustration purposes */
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications.
Each week, we'll send you a fresh batch of hand-picked,
personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the
Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>