CODEWITHSUNDEEP
htmlcssflexboxalignment
Miloertas
Miloertas

Reputation: 350

Inline Flex Issue, White space

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>

Upvotes: 2

Views: 75

Answers (1)

showdev
showdev

Reputation: 29188

You may find align-items useful.

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.

The default for align-items is stretch.
But you can set it to flex-start.

* {
  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);
  display: flex;
}

nav a {
  display: flex;
  justify-content: center;
  align-items: center;
}

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 {
  flex: 0 0 48%;
  margin: 0px 1%;
  background: white;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.10);
  height: auto;
}

#panel_holder {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}


/* 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;
  }
}
<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 id="panel_holder">
  <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>
  </div>
  <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>
  </div>
  <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>
  </div>
  <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>
  </div>
</div>

I also edited the nav element:

nav {
  width: 100%;
  position: fixed;
  box-shadow: 1px 10px 40px 0px rgba(0, 0, 0, 0.05);
  display: flex;
}
nav a {
  display: flex;
  justify-content: center;
  align-items: center;
}

For reference, see these articles at CSS-Tricks:

  1. A Complete Guide to Flexbox
  2. align-items

Upvotes: 4

Related Questions