1

So I was working on an HTML SPA. I created sections and wanted each section to be horizontally split in 40:60 ratio. The problem is that when I want to vertically center content in the columns, it is leaving a lot of white space at the end of the column. This is not a big problem but after the last column a lot of white space is left which is definitely unappealing.

The Problem

A snippet of my code:

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vw;
  margin: 0;
  padding: 0;
  background-color: #23272e;
  color: whitesmoke;
}

section {
  width: 100%;
  height: 100vh;
  float: left;
}

section:nth-child(2) {
  background-color: green;
}

.section-content {
  height: calc(100vh - 1.5rem);
}

.row {
  height: 100%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  height: 100%;
  padding: 1.5rem;
  margin: 0;
}

.col-left {
  width: 40%;
  height: 100%;
  text-align: center;
}

.col-right {
  width: 60%;
  height: fit-content;
  text-align: start;
}

.col-content {
  display: inline-block;
  height: 100%;
  transform: translateY(50%);
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

EDIT: The CSS isn't working properly in the snippet, posting my code too.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
      *,
      ::after,
      ::before {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }

      body {
          width: 100vw;
          height: 100vw;
          margin: 0;
          padding: 0;
          background-color: #23272e;
          color: whitesmoke;
      }

      section {
        width: 100%;
        height: 100vh;
        float: left;
      }

      section:nth-child(2) {
        background-color: green;
      }

      .section-content {
        height: calc(100vh - 1.5rem);
      }

      .row {
        height: 100%;
      }

      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      .column {
        float: left;
        height: 100%;
        padding: 1.5rem;
        margin: 0;
      }

      .col-left {
        width: 40%;
        height: 100%;
        text-align: center;
      }

      .col-right {
        width: 60%;
        height: fit-content;
        text-align: start;
      }

      .col-content {
        display: inline-block;
        height: 100%;
        transform: translateY(50%);
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <section id="qualifications">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Qualifications</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <div class="section-content">
        <div class="row">
          <div class="column col-left">
            <div class="col-content">
              <h3 class="caps">Contact</h3>
            </div>
          </div>
          <div class="column col-right">
            Officia sunt et et eiusmod ipsum qui reprehenderit. Esse sunt amet
            cillum deserunt excepteur voluptate laboris nostrud excepteur
            deserunt et eu laborum veniam. Tempor veniam laboris pariatur non
            magna laborum do nulla ullamco ullamco laboris. Reprehenderit
            nostrud officia commodo ullamco voluptate mollit culpa est duis sunt
            consectetur sunt. Elit elit culpa cillum commodo irure labore non
            sint ut voluptate proident.
          </div>
        </div>
      </div>
    </section>
  </body>
</html>

The problem: Whitespace at the end of page as you can see there is and undesirable blank space at the end of the page.

Expected behaviour: Expected behaviour No blank space at the end of page.

Lakshaya U.
  • 1,089
  • 1
  • 5
  • 21
  • Can you clarify what's wrong with the first image and to which section you are referring? – IT goldman Jun 26 '22 at 08:02
  • @ITgoldman the problem with that is as you can see, after setting `transform: translateY(50%)`, there is a huge whitespace created under the element as you can see in the image. This is from the second section, but it causes blank space after the last section, i.e. at the end of the page too. I'll add another snip. – Lakshaya U. Jun 26 '22 at 08:06
  • Why don't you use flexbox or grid instead of float in your layout? – Anton Jun 26 '22 at 08:21
  • seems that the problem is with either `.row {height: 100%;}` or `.section-content {height: calc(100vh - 1.5rem);}` because removing one of these removed the black space at the end of the page (but caused the content to move to the top of the sections). Or may be you can give a sketch/idea of the layout you are trying to achieve, I believe it can be coded in a better way. – first Jun 26 '22 at 08:23
  • @Anton tried that, got the blank space removed but couldn't get it centered. – Lakshaya U. Jun 26 '22 at 08:25
  • @firstuser the layout is basically 3 sections each split into 40:60, with the content in the left column both horizontally and vertically centered. – Lakshaya U. Jun 26 '22 at 08:28

2 Answers2

1

If you want to center content vertically inside a div, there are many solutions: https://stackoverflow.com/a/2939979/3807365

But since this happens because the height of the translated (moved) div overflows its containing div you can just add this. (but it's just a quick fix because half of the content would be lost if it takes all the height)

.col-left {
    overflow: hidden;
}
IT goldman
  • 14,885
  • 2
  • 14
  • 28
  • Exactly. I've just added placeholder text. There are gonna be some `
      `s in `.col-left` so hiding overflow is not an option.
     – Lakshaya U. Jun 26 '22 at 08:26
0

This is what you are trying to achieve? I have used flexbox. (see snippet result in full page)

.container>section {
  height: 500px;
  display: flex;
}

.container>section>div:nth-child(1) {
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container>section>div:nth-child(2) {
  width: 60%;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>

With grid

.container>section {
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.container>section>div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .section-1 {
  background-color: skyblue;
}

.container .section-2 {
  background-color: pink;
}

.container .section-3 {
  background-color: yellow;
}
<div class="container">
  <section class="section-1">
    <div>heading</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui veritatis neque iure animi quae placeat labore eligendi a, rem architecto delectus dicta hic aspernatur vitae perferendis sed blanditiis maiores iusto porro natus ipsa similique tenetur?
      Doloremque saepe eius natus repellat ullam! Porro quibusdam omnis assumenda facere facilis tempore expedita, nisi pariatur, non temporibus soluta ab veritatis eius sunt quaerat adipisci laudantium eligendi mollitia quis earum perspiciatis delectus
      explicabo magnam! Culpa ducimus voluptatem suscipit aliquid? Nisi, minus incidunt! Atque corporis voluptate ipsum, vero mollitia molestias sed totam expedita quia dolor neque nobis alias cum impedit ut necessitatibus beatae reiciendis maxime! Excepturi!</div>
  </section>
  <section class="section-2">
    <div>heading</div>
    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusantium voluptatibus quis aperiam qui nulla quaerat voluptatem voluptas consectetur, consequatur est accusamus inventore. Recusandae, dolorum accusamus. Omnis assumenda labore, repellendus
      impedit rerum ratione architecto alias sequi vero at consequuntur voluptatem similique blanditiis exercitationem. Ipsa reiciendis, est, dolore harum at architecto error aliquid ullam dolorum magnam nobis nam. Ab cum consectetur quibusdam minus eum
      alias commodi suscipit autem. Dolore velit beatae saepe nesciunt harum accusantium natus qui fugiat, accusamus, commodi maxime nostrum explicabo fuga omnis temporibus obcaecati modi sequi perferendis! Illo, optio ab. Explicabo distinctio consequuntur
      molestiae veniam, ducimus sit exercitationem id.</div>
  </section>
  <section class="section-3">
    <div>heading</div>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum recusandae laboriosam sed molestiae illo, earum, ad vero dolor deserunt reprehenderit dicta temporibus suscipit itaque vel alias similique voluptas nam iusto velit excepturi distinctio
      placeat. Dolorem voluptatum doloribus hic vero neque fugit unde culpa impedit reprehenderit ab rerum corrupti consequuntur iusto sed totam velit voluptates eius, animi aut. Quisquam, iusto nulla, nisi dolorum maiores doloremque maxime quos ullam
      accusantium consequatur molestias, adipisci itaque iure molestiae vero aliquid velit dolore esse? Cum nihil quidem eligendi obcaecati itaque, sapiente ullam cumque excepturi fuga numquam voluptate repudiandae laboriosam corrupti quisquam accusantium
      nisi adipisci nemo?</div>
  </section>
</div>
first
  • 616
  • 1
  • 7
  • 13