Responsive full height two column website, image inside one column

Stackoverflow Solution

by Atif Hassan

HTML

<div id="container">
  <div id="column1">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum bibendum laoreet. Suspendisse eu mauris urna. Vestibulum vel blandit erat. Suspendisse egestas semper urna in convallis. Aliquam lobortis, leo nec pharetra semper, elit risus aliquet metus, non malesuada massa turpis tincidunt lectus. Fusce pellentesque metus ac lectus ultricies, et fermentum tellus fringilla.</span>
  </div>
  <footer id="column2"></footer>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#column1 {
  position: relative;
  width: calc(50% - 4px);
  height: calc(100% - 4px);
  display: inline-block;
  border: 2px solid black;
}

#column1 span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
}

#column2 {
  position: relative;
  top: -50%;
  left: 50%;
  width: calc(50% - 2px);
  height: calc(50% - 4px);
  display: inline-block;
  border: 2px solid black;
  border-left: none;
}