I have created two sections filled with content. I want to know how I can make my two sections align horizontally, even when scaled and even if one has more content than the other. I've tried display:flex in the .section part of my css but that didn't work, nor did changing the flex direction. How can I get my desired effect?
My html:
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="clearfix">
<section class="one">
<p id="title-one">UNDERSTANDING GENDER</p>
<p id="content1" class="questions" style="padding-top: 20px;"> What is Gender? </p>
<p id="content1" class="bodytype">One's self identification as either male or female based upon societal or cultural standards of what is masculine and what is feminine. A social combination of identity, expression, and social elements. </p>
<p id="content3"> GENDER = MASCULINE or FEMININE </p>
<p id="content1" class="questions">What is sex? </p>
<p id="content1" class="bodytype">The physical, biological, chromosomal, genetic, and anatomical make up of a body, classified as male, female, intersex, or transsexual. </p>
<p id="content3"> SEX = MALE OR FEMALE </p>
<p id="content1" class="questions">So sex and gender are not the same? </p>
<p id="content1" class="bodytype"> No, since gender refers to self identification, while sex is someone's biological identification. So someone's sex can be different from the gender they choose to identify by and vise versa. </p>
<p id="content1" class="questions"> What is sexual orientation? </p>
<p id="content1" class="bodytype"> Sexual orientation is not to confused with one's gender identity. Someone's sexual orientation has to do with one's attraction to others. </p>
<p id="content1"> </p>
<p id="content1" class="bodytype"> </p>
<p id="content1" class="questions">GENDER IDENTITY:</p>
<p id="content1" class="bodytype"> One's innermost concept of self as male, female, a blend of both or neither </p>
<p id="content1" class="questions"> Gender Expression: </p>
<p id="content1" class="bodytype"> How one chooses to express one’s gender identity to others through behavior, clothing, hairstyle, voice, body characteristics, etc. Gender expression may change over time and from day to day, and
may or may not conform to an individual’s gender identity </p>
<p id="content1" class="questions"> Gender Binary: </p>
<p id="content1" class="bodytype"> The idea that there are only two genders, male and female, many times accompanied with the notion that a person must be either male or female. </p>
<p id="content1"> Gender Dsyphoria: </p>
<p id="content1" class="bodytype"> the condition of feeling one's emotional and psychological identity as male or female to be opposite to one's biological sex. </p>
</section>
<section class="two">
<p id="title-two">Gender symbols</p>
<figure class="item">
<img class="blue" src="https://s28.postimg.org/g7i9ac6od/100px_Mars_symbol.png"/>
<figcaption class="caption">male</figcaption>
</figure>
<figure class="item">
<img class="pink" src="https://s24.postimg.org/hc94bj4x1/female_symbol_svg.png">
<figcaption class="caption">female</figcaption>
</figure>
<figure class="item">
<img class="purple" src="https://s27.postimg.org/5jvzf3h9v/transgender.png"/>
<figcaption class="caption">Transgender</figcaption>
</figure>
<figure class="item">
<img class="blue" src="https://s28.postimg.org/9ghy249bx/intesex.png"/>
<figcaption class="caption">intersex</figcaption>
</figure>
<!-- ROW 2 -->
<figure class="item">
<img class="pink" src="https://s29.postimg.org/btk18gxb7/neutrois.png"/>
<figcaption class="caption">neutrois</figcaption>
</figure>
<figure class="item">
<img class="purple" src="https://s29.postimg.org/50joc76hv/Androgyne.png">
<figcaption class="caption">Androgyne</figcaption>
</figure>
<figure class="item">
<img class="blue" src="https://s29.postimg.org/8y6y1ltb7/intergender.png"/>
<figcaption class="caption">intergender</figcaption>
</figure>
<figure class="item">
<img class="pink" src="https://s29.postimg.org/e71yzhbqb/3rd.png"/>
<figcaption class="caption">3rd gender</figcaption>
</figure>
<!-- ROW 3 -->
<figure class="item">
<img class="purple" src="https://s28.postimg.org/g7i9ac6od/100px_Mars_symbol.png"/>
<figcaption class="caption">neutrois</figcaption>
</figure>
<figure class="item">
<img class="blue" src="https://s28.postimg.org/pr2mfj9ah/genderqueer.png">
<figcaption class="caption">genderqueer</figcaption>
</figure>
<figure class="item">
<img class="pink" src="https://s28.postimg.org/mt5nlu1mx/demiboy.png"/>
<figcaption class="caption">demiboy</figcaption>
</figure>
<figure class="item">
<img class="purple" src="https://s28.postimg.org/rgbpnlozt/demigirl.png"/>
<figcaption class="caption">demigirl</figcaption>
</figure>
<!-- Row 4 -->
<figure class="item">
<img class="blue" src="https://s28.postimg.org/6r34fg1xl/agender_V1.png"/>
<figcaption class="caption">Agender: v1</figcaption>
</figure>
<figure class="item">
<img class="pink" src="https://s28.postimg.org/qzqi1618p/agender_v2.png">
<figcaption class="caption">Agender: v2</figcaption>
</figure>
<figure class="item">
<img class="purple" src="https://s28.postimg.org/wvkfokgjt/gendervoid.png"/>
<figcaption class="caption">gendervoid</figcaption>
</figure>
<figure class="item">
<img class="blue" src="https://s24.postimg.org/6hj9g7bxh/pangender.png"/>
<figcaption class="caption">pangender</figcaption>
</figure>
<!-- ROW 5 -->
<figure class="item">
<img class="pink" src="https://s28.postimg.org/nl8bl15u1/epicene.png"/>
<figcaption class="caption">epicene</figcaption>
</figure>
<figure class="item">
<img class="purple" src="https://s28.postimg.org/ry6v3gekp/other.png">
<figcaption class="caption">other</figcaption>
</figure>
</section>
</div>
my css:
.clearfix {
overflow: hidden;
}
section {
width: 40%;
min-height: 200px;
max-height: 2900px;
font-weight: bold;
text-transform: uppercase;
color: white;
font-family: sans-serif;
font-size: 30px;
padding: 5%;
text-align: center;
float: left;
}
.bodytype{
font-family: 'Poppins', sans-serif;
}
#title-one{
color: black;
font-size: 28pt;
}
.questions {
font-size: 16pt !important;
color:black;
}
#content1{
padding-bottom:.5em;
font-size: 12pt;
text-align: center;
}
#content3 {
padding: 25px;
font-size: 18pt;
color:#5f2685;
}
#title-two{
padding-bottom: 1.5em;
font-size: 28pt;
}
.one {
background-color: #66CEF6;
height: 100%;
}
.two {
background-color: #957CB9;
height: 100%;
}
figure.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 150px;
}
.blue {
width: 75%;
background-color:#00b8f1;
border-radius:5px;
}
.pink {
width: 75%;
background-color:#ed367e;
border-radius:5px;
}
.purple {
width: 75%;
background-color:#5f2685;
border-radius:5px;
}
.caption {
/* Make the caption a block so it occupies its own line. */
display: block;
font-size:12pt;
padding-bottom:1em;
}
/* media queries*/
@media (max-width: 626px)
{
#title-one{
font-size: 4.75vw;
}
#content1 {
font-size: 3vw;
}
#title-two{
font-size: 4.75vw;
}
#content3 {
font-size: 4vw;
}
}
Try something like this:
.clearfix { display: flex; min-height: 200px; max-height: 2900px; }
Remove the height property on both .one and .two
Remove the following properties on section:
width
min-height
max-height
float
And add
flex: 1;