CODEWITHSUNDEEP
htmlcssflexbox
Peter Cardenas
Peter Cardenas

Reputation: 806

How to make stacked divs same width?

I am trying to create an home page, it looks like this currently:

.container {
  display: flex;
}

.heading {
  display: inline-block;
  width: 170px;
  vertical-align: top;
  text-align: left;
  padding-right: 20px;
}

.desc {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  border-left: solid 2px black;
}

.tabPage {
  position: absolute;
  max-width: calc(100vw - 30px);
  height: 88vh;
  z-index: -1;
}
<div id="about" class="tabPage">
  <div id="general" class="container">
    <div class="heading">
      <h1>
        ABOUT US
      </h1>
    </div>
    <div class="desc">
      <p>
        The Allen Table Tennis Club is brought to you by the efforts of five passionate individuals. We aspire to create a club that provides an engaging environment, promotes a competitive spirit, and presents a charitable opportunity. We hold monthly tournaments
        that give the top 16 players a chance to make a donation to a charity of their choice. Whether you choose to have fun and relax or compete to transform lives around the world, we welcome you into our club.
      </p>
    </div>
  </div><br>
  <div id="meetings" class="container">
    <div class="heading">
      <h1>
        MEETINGS
      </h1>
    </div>
    <div class="desc">
      <p>
        Thursdays Every Week
      </p>
    </div>
  </div><br>
</div>

I am having trouble making the border line up. I am presuming that it is because the widths are not calculated correctly?

Upvotes: 2

Views: 772

Answers (2)

William Chong
William Chong

Reputation: 2203

Add min/max-width: 170px; in .heading if you want to guarantee the width

.container {
  display: flex;
}

.heading {
  display: inline-block;
  max-width: 170px;
  min-width: 170px;
  vertical-align: top;
  text-align: left;
  padding-right: 20px;
}

.desc {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  border-left: solid 2px black;
}

.tabPage {
  position: absolute;
  max-width: calc(100vw - 30px);
  height: 88vh;
  z-index: -1;
}
<div id="about" class="tabPage">
  <div id="general" class="container">
    <div class="heading">
      <h1>
        ABOUT US
      </h1>
    </div>
    <div class="desc">
      <p>
        The Allen Table Tennis Club is brought to you by the efforts of five passionate individuals. We aspire to create a club that provides an engaging environment, promotes a competitive spirit, and presents a charitable opportunity. We hold monthly tournaments
        that give the top 16 players a chance to make a donation to a charity of their choice. Whether you choose to have fun and relax or compete to transform lives around the world, we welcome you into our club.
      </p>
    </div>
  </div><br>
  <div id="meetings" class="container">
    <div class="heading">
      <h1>
        MEETINGS
      </h1>
    </div>
    <div class="desc">
      <p>
        Thursdays Every Week
      </p>
    </div>
  </div><br>
</div>

Upvotes: 1

Victoria Ruiz
Victoria Ruiz

Reputation: 5013

Just add: flex-shrink: 0; to your .heading css.

Here's a working snippet:

.container {
  display: flex;
}

.heading {
  display: inline-block;
  width: 170px;
  vertical-align: top;
  text-align: left;
  padding-right: 20px;
  flex-shrink: 0;
}

.desc {
  display: inline-block;
  padding-left: 20px;
  padding-top: 10px;
  border-left: solid 2px black;
}

.tabPage {
  position: absolute;
  max-width: calc(100vw - 30px);
  height: 88vh;
  z-index: -1;
}
<div id="about" class="tabPage">
  <div id="general" class="container">
    <div class="heading">
      <h1>
        ABOUT US
      </h1>
    </div>
    <div class="desc">
      <p>
        The Allen Table Tennis Club is brought to you by the efforts of five passionate individuals. We aspire to create a club that provides an engaging environment, promotes a competitive spirit, and presents a charitable opportunity. We hold monthly tournaments
        that give the top 16 players a chance to make a donation to a charity of their choice. Whether you choose to have fun and relax or compete to transform lives around the world, we welcome you into our club.
      </p>
    </div>
  </div><br>
  <div id="meetings" class="container">
    <div class="heading">
      <h1>
        MEETINGS
      </h1>
    </div>
    <div class="desc">
      <p>
        Thursdays Every Week
      </p>
    </div>
  </div><br>
</div>

Here's the explanation, from the W3C's documentation:

The defining aspect of flex layout is the ability to make the flex items “flex”, altering their width/height to fill the available space in the main dimension. This is done with the flex property. A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container, or shrinks them (proportional to their flex shrink factor) to prevent overflow.

A flex item is fully inflexible if both its flex-grow and flex-shrink values are zero, and flexible otherwise.

Upvotes: 4

Related Questions