Christopher Evans Christopher Evans - 3 months ago 14
CSS Question

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>




Answer

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.