CODEWITHSUNDEEP
cssflexboxhtml
Christopher Evans
Christopher Evans

Reputation: 51

Aligning flex items horizontally in a vertical flex container

I can't figure out for the life of me how to make this page work.

I'm trying to have the "Top" be a header, the "Bottom" be the footer, and "table" and "section" be two separate columns in between.

Although I can't figure it out. Thanks.

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
  flex-grow: 1;
}
#table {
  background-color: blue;
  width: 50%;
  flex-grow: 8;
  flex-shrink: 1;
}
#pageSection {
  background-color: lightpink;
  width: 50%;
  flex-flow: 8;
  flex-shrink: 1;
}
#pageBot {
  flex-grow: 1;
  background-color: grey;
}
<body>
  <div id="pageTop">Top</div>
  <nav id="table">table</nav>
  <div id="pageSection">section</div>
  <div id="pagebot">Bottom</div>
</body>

Upvotes: 2

Views: 81

Answers (2)

zer00ne
zer00ne

Reputation: 44118

Like Micheal_B stated:

Wrap the #table and the #section in one container. That container becomes the second flex item in the parent flex container. Then add display: flex to the new container.

Changes

  • Added main#pageContent to body and wrapped it around nav#table and section#pageSection
    • Added display: flex, justify-content: center, and flex: 2 0 auto
  • Changed all flex-grow and flex-shrink to flex shorthand.
    • ex. flex: 0 1 auto = flex-grow: 0 flex-shrink: 1 flex-basis: auto
    • note. The ruleset above is default for all flex children.
  • Removed align-content and justify-content; and changed the value of flex-wrap from wrap to nowrap; and added overflow:hidden and width: 100% to normalize a little.
  • Added width: 100% to everything with the exception of #pageSection and #table.
  • Added height: 2em to #pageTop and #pageBot(BTW, corrected typo)
  • Changed all of the tags to it's semantic equivalents.

main#pageContent

  • Height is set up to take up the freespace that the footer and header leave by height: calc(100% - 4em). This probably overkill since it also has flex: 2 0 auto.
  • It is a flex container (flex: display) and a flex child (flex: 2 0 auto)

section#pageSection

  • overflow-x: hidden will prevent any content from busting out of the borders sideways. overflow-y:auto will accommodate any content that extends the bottom border by adding a scrollbar. I have added content (a few <p>) to demonstrate.

SNIPPET

html {
  height: 100%;
  width: 100%;
}
body {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
  overflow: hidden;
}
#pageContent {
  width: 100%;
  height: calc(100% - 4em);
  display: flex;
  justify-content: center;
  flex: 2 0 auto;
}
#pageTop {
  width: 100%;
  height: 2em;
  background-color: violet;
  padding-left: 1em;
  padding-top: .5em;
  flex: 0 0 auto;
}
#table {
  background-color: cornflowerblue;
  width: 50%;
  flex: 0 0 auto;
}
#pageSection {
  background-color: darksalmon;
  width: 50%;
  flex: 1 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
}
#pageBot {
  width: 100%;
  height: 2em;
  flex: 0 0 auto;
  background-color: gold;
}
<body>
  <header id="pageTop">Top</header>
  <main id='pageContent'>
    <nav id="table">table</nav>
    <section id="pageSection">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

      <p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>

      <p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</p>

      <p>His room, a proper human room although a little too small, lay peacefully between its four familiar walls.</p>

      <p>A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted
        out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. Drops</p>
    </section>
  </main>
  <footer id="pageBot">Bottom</footer>
</body>

Upvotes: 1

Al Foиce ѫ
Al Foиce ѫ

Reputation: 4315

Add a div with flex row, as it (adjust cols width with width attribute):

html {
  height: 100%;
}
body {
  display: flex;
  height: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 0;
}
#pageTop {
  background-color: lightgrey;
  padding-left: 1em;
  padding-top: .5em;
}
#mainContainer {
  display: flex;
  flex-direction: row;
}

#table {
  background-color: blue;
  width: 50%;

}
#pageSection {
  background-color: lightpink;
  width: 50%;

}
#pagebot {
  background-color: grey;
}
<body>
  <div id="pageTop">Top</div>
  <div id="mainContainer">
    <nav id="table">table</nav>
    <div id="pageSection">section</div>
  </div>
  <div id="pagebot">Bottom</div>
</body>

PS: I also fixed a pagebot/pageBot variant. Be aware, CSS is case-sensitive.

Upvotes: 0

Related Questions