CODEWITHSUNDEEP
htmlcssflexbox
Cloudboy22
Cloudboy22

Reputation: 1514

Position a div at bottom of container

I am trying to set a div to the bottom of a page in a flex container.

Somehow, I am able to do it using:

position:absolute;
bottom: 10px;

But the div then wraps to the whole viewport.

I am trying to fix it in a single box.

Check the code. You will get the idea.

https://jsfiddle.net/v3v1z7pv/

#container {
  display: flex;
  height: 100vh;
  width: 100vw;
  flex-flow: row;
}
body {
  margin: 0px;
  padding: 0px;
}
.box {
  min-width: 300px;
  border: 1px solid black;
  background-color: red;
}
.whiteBox {
  bottom: 10px;
  width: 100%;
  height: 100px;
  background-color: white;
  position: absolute;
}
<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

Upvotes: 3

Views: 1041

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371889

If you must use positioning, then add position: relative to the box class, so it becomes the bounding box (i.e., nearest positioned ancestor) for the absolutely-positioned whiteBox child.

Otherwise, you don't need absolute positioning for this task. It can be done purely with flex properties. With this method the whiteBox element is not removed from the document flow.

.box {
    min-width: 300px;
    border: 1px solid black;
    background-color: red;
    display: flex;             /* NEW */
}

.whiteBox {
    /* bottom: 10px; */
    width: 100%;
    height: 100px;
    background-color: white;
    /* position: absolute; */
    align-self: flex-end;      /* NEW */
}


#container {
    display: flex;
    height: 100vh;
    width: 100vw;
    flex-flow: row;
}

body {
    margin: 0px;
    padding: 0px;
}

.box {
    min-width: 300px;
    border: 1px solid black;
    background-color: red;
    display: flex;             /* NEW */
}

.whiteBox {
    /* bottom: 10px; */
    width: 100%;
    height: 100px;
    background-color: white;
    /* position: absolute; */
    align-self: flex-end;      /* NEW */
}
<div id="container">
    <div class="box">
        <div class="whiteBox">Whte box</div>
    </div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

revised fiddle

Upvotes: 1

Dan Hawkins
Dan Hawkins

Reputation: 177

You're missing the position:relative to the .box element. Add that and you should get the result you want :)

Upvotes: 1

Mihai T
Mihai T

Reputation: 17697

add position:relative to .box . so the whitebox will stay inside it

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

see more here relative absolute

#container
{
  display:flex;
  height:100vh;
  width:100vw;
  flex-flow: row;
}
body{
  margin:0px;
  padding:0px;
}
.box
{
  min-width:300px;
  border:1px solid black;
  background-color:red;
  position:relative;
}
.whiteBox
{
  bottom:10px;
width:100%;
height:100px;
background-color:white;
position: absolute;

}
<div id="container">
  <div class="box">
    <div class="whiteBox">Whte box</div>
  </div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>

</div>

Upvotes: 2

Related Questions