CODEWITHSUNDEEP
htmlcss
ST80
ST80

Reputation: 3903

How to push down absolute positioned div with CSS

I have a container which contains a top region and a bottom region. The top region contains two additional divs which (later on) will contain dynamic content. The bottom is a absolute positioned div, which ALWAYS should be positioned in the bottom, no matter how much content the top section contains, the bottom should be pushed down. For some reason I dont know, it fails. Can someone help me out?

My HTML looks something like this:

<div class="container">
  <div class="top">
    <div class="left">
      <h3>
        some left header
      </h3>
      <p>
       some left text
      </p>
    </div>
   <div class="right">
    <h3>
      some right header
    </h3>
    <p>
      some right text
    </p>
    <p>
      some right text
    </p>
  </div>
 </div>
 <div class="bottom">
  <p>
    some bottom text
  </p>
  <p>
    more bottom text
  </p>
</div>

and my CSS:

.container {
  position: relative;
  border: 1px solid black;
  min-height: 255px
}

.top {
  display: flex;
  border: 1px solid black;
 }

.left {
  float: left;
  border: 1px solid red;
 }
.right {
  float: right;
  border: 1px solid green;
}
.bottom {
  position: absolute; // here the issue appears
  bottom: 0;          // here too
}

I have a JSFiddle how it should look like or what I want to achieve

Additionally I have a JSFiddle how it looks with the position absolute div.

Upvotes: 0

Views: 2101

Answers (2)

Uniforlyff
Uniforlyff

Reputation: 111

How about adding the height property with the value 100vh to your container.

height: 100vh;

Upvotes: 2

Flignats
Flignats

Reputation: 1274

If you remove the position: relative; from .container the absolute positioned element will remain at the bottom.

Upvotes: 0

Related Questions