CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 3

Misaligned CSS layout - 3 col layout with fixed center

I'm new to css and I'm trying to create a 3-col layout. There should be a centered footer too. The total height of the page should fill the screen which it currently does. The width seems off.

Currently the footer seems misaligned in both dimensions and positioning.

I have attached the design I'm trying to build. thankful for any pointers!

.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

.left {
  background-color: gainsboro;
  width: 20%;
}

.center {
  background-color: white;
  width: 60%;
}

.right {
  background-color: gainsboro;
  width: 20%;
}

.footer {
  height: 20px;
  margin-left: 20%;
  margin-right: 20%;
  text-align: center;
  width: 60%;
  background-color: red;
}
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center">Bla bla bla bla bla</div>
    <div class="right"></div>
  </div>

  <div class="footer">this is a footer!</div>
</body>

Upvotes: 0

Views: 29

Answers (1)

aze&#243;s
aze&#243;s

Reputation: 4901

If you need the footer to be at the bottom of your center column, place it inside it. With display: flex in .center you can use margin-top: auto in the .footer to push it to the bottom.

.container {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
}

body {
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
}

.left {
  background-color: gainsboro;
  width: 20%;
}

.center {
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 60%;
}

.right {
  background-color: gainsboro;
  width: 20%;
}

.footer {
  width: 100%;
  height: 20px;
  margin-top: auto;
  text-align: center;
  background-color: red;
}
<body>
  <div class="container">
    <div class="left"></div>
    <div class="center">
      Bla bla bla bla bla
      <div class="footer">this is a footer!</div>
    </div>
    <div class="right"></div>
  </div>
</body>

Upvotes: 1

Related Questions