I'm having this issue where I want to have multiple divs containing info however I can't manage to make the height correspond to the text field.
No matter what the white windows will constantly have the same height.
And if I change the display to something else than display: inline-flex; it'll not display my two windows properly.
EDIT: I'd also like to know how to make it so there's two columns in which the divs stack. As soon as I add a third one they create a new column every time.
If I can get a solution for each of those two issues it would be wonderful.
Thank you in advance.
PS: Expand the snippet to full page for accurate results.
* {
margin: 0px;
padding: 0px;
font-family: 'Montserrat', sans-serif;
}
body {
background: hsl(47, 9%, 90%);
}
nav {
width: 100%;
position: fixed;
box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.05);
}
a {
text-decoration: none;
color: white;
}
::selection {
background: wheat;
}
.logo-box {
font-size: 30px;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
height: 80px;
width: 25%;
background: #68CC93;
}
.link-box {
font-size: 30px;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
height: 80px;
width: 25%;
background: #998D78;
}
.link-box:hover {
background: hsl(38, 14%, 44%);
}
.text-container {
width: 98%;
margin: 0px 1%;
background: white;
height: auto;
box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.10);
}
.main-heading {
color: hsl(120, 3%, 30%);
background: wheat;
font-size: 28px;
font-weight: 100;
padding: 10px 10px;
letter-spacing: 1px;
}
.description {
padding: 10px;
color: hsl(120, 3%, 60%);
float: right;
}
.text-field {
padding: 10px;
color: hsl(120, 2%, 20%);
}
#highlight {
color: #FF9151;
}
.half-screen-text-box {
display: inline-block;
width: 48%;
margin: 0px 1%;
background: white;
box-shadow: 1px 10px 40px 0px rgba(0,0,0,0.10);
height: auto;
}
/* NOTE: Media Queries */
@media only screen and (max-width: 920px) {
.logo-box, .link-box, .pseudo-nav {
font-size: 20px;
height: 60px;
}
.main-heading {
font-size: 20px;
}
.description, .text-field {
font-size: 14px;
}
}<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|Montserrat|Slabo+27px" rel="stylesheet">
<link rel="stylesheet" href="../css/master.css" type="text/css">
<title>Amandita</title>
</head>
<body>
<nav>
<div class="logo-box">
<a>Amandita<sup style="font-size:12px;">FRANCE</sup></a>
</div><!--
--><a class="link-box" href="../../main.html">
ACCUEIL
</a><!--
--><a class="link-box" href="./propos.html">
À PROPOS
</a><!--
--><a class="link-box" href="#">
FAIRE UN DON
</a>
</nav><br><br><br><br><br>
<div style="display: inline-flex; width: auto;">
<div class="half-screen-text-box">
<p class="main-heading">COMMENT DONNER</p>
<p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
<p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. Pellentesque quis turpis nec sapien pellentesque porttitor. Nam sollicitudin efficitur libero, et dictum diam. Aenean a felis consequat, convallis est non, viverra mauris. Etiam gravida felis magna, eget laoreet ante ornare vel. Quisque tincidunt aliquet mi. Donec magna elit, dictum quis dui facilisis, rutrum lacinia lacus. Sed viverra hendrerit posuere. Etiam consectetur tincidunt dictum. Morbi nec orci non velit dictum accumsan sit amet ac eros. Etiam ac sem venenatis, vestibulum lorem ut, placerat nisl. In consequat ultricies condimentum. Suspendisse potenti. Phasellus suscipit rutrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
</p>
</div><br>
<div class="half-screen-text-box">
<p class="main-heading">CONDITIONS</p>
<p><a class="description" style="float:left;">Thurs. 2 April</a><a class="description">Compte rendu moi de Mars</a><br><br>
<p class="text-field">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta ac leo sed consectetur. Nunc id magna ac quam ultricies sagittis vel non eros. Quisque ultrices, ipsum ut imperdiet faucibus, ligula leo fringilla urna, et ultricies massa arcu id velit. Quisque feugiat sem ac mauris aliquam rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec volutpat dui quis lectus congue, at lacinia ipsum congue. Integer in iaculis velit. utrum erat, in scelerisque odio rhoncus vel. Quisque facilisis eleifend mollis. In dictum nisi leo, a fringilla nisi finibus vel. Morbi ultricies lacus a faucibus egestas. Sed mollis, mi at maximus sagittis, odio dolor pretium sem, in pretium purus ante non eros. Morbi id.</p>
</p>
</div><br>
</div>
</body>
</html>
