How to position items along the whole screen height while avoiding absolute positioning?

user_7764329 0
Viewed 55

I have a div container with two subcontainers. The parent div should have a full height (from the top to the bottom of the screen). The first sub container should always be in the left center of that parent container. The second sub container should always be at the right bottom of that parent container.

enter image description here

First of all I tried to solve it using absolute positions

html,
body {
  height: 100%;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}
<div>
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

I thought about avoiding absolute positions. Is there a way using flexbox/grid for this? I started with this

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  display: flex;
  justify-content: flex-end;
}
<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

as you can see the first subcontainer seems to be fine. The second one is at the bottom of the container which looks good. But the content is not at the right bottom corner (you might have to click "Full page" to see it). Does someone know how to fix it? Maybe this snippet can be simplified?

css html
4 Answers

You can use grid to display 2 columns and align-self: self-end to push the second column to bottom.

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

#second {
  align-self: self-end;
  text-align: right;
}
<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

user_8631100

The second div doesnt need to set display flex. Just set margin-left: auto; it should work as div is display block by default.

html,
body {
  height: 100%;
}

#parent {
  height: 100%;
  display: flex;
}

#first {
  align-self: center;
}

#second {
  align-self: flex-end;
  margin-left:auto;
  white-space: nowrap;
}
<div id="parent">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    <div>this is always on the right bottom of the screen</div>
  </div>
</div>

user_99311460

If I understand your problem correctly, then you need to set these rules to the html, body tags:

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

And the parent container has a height: 100%. I have given two solutions with absolute positioning and flexbox.

html, body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#first {
  position: absolute;
  top: 50%;
}

#second {
  position: absolute;
  bottom: 0;
  right: 0;
}
<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

Solution with flex and margin:

html,
body {
  height: 100vh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  height: 100%;
}

#first {
  margin-top: auto;
  margin-bottom: auto;
}

#second {
  margin-top: auto;
  margin-left: auto;
}
<div id="container">
  <div id="first">
    this is always on the left center of the screen
  </div>
  <div id="second">
    this is always on the right bottom of the screen
  </div>
</div>

user_135734440

Side Note: Don't use IDs for styling.

Code Explanation:

  • 100vw and 100vh for the parent wrapper to give it full width & height.
  • align-items: center alongside display: flex to vertically center all children (mainly, our left-center child)
  • For the right-bottom child, we give it an absolute position with right: 0 and bottom: 0 to stick it to the corner (Don't forget position: relative to its parent to avoid overlapping if you've other elements on the page)

Here's a working snippet 

* {
  margin: 0;
  padding: 0;
}

.parent {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #e9e9e9;
}

.left-center {
  width: 150px;
  height: 100px;
  background: #333;
}

.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 100px;
  background: #c1c1c1;
}
<div class="parent">
  <div class="left-center"></div>
  <div class="right-bottom"></div>
</div>

user_55603990
Related