0

I'm trying to make a div contain inside another div using absolute however when I add a hundred percent height and width it does it the bodys size rather than 100% height and width of the div that its contained in, therefor I can't position the div at the bottom of the div it's contained in.

Does anybody know a solution for the problem I'm facing here.

  .row {
  width: 80%;
  max-width: 1425px;
  margin: 0 auto;
  padding: 50px 0px;
  display: flex;
}

.column {
  flex: 1;
}

.halves {
  display: flex;
  justify-content: space-between;
}

.halves .column {
  width: 50%;
}

.p1 {
  height: 600px;
}

.sand {
  background-color: #e4c8b8
}

img {
  max-width: 100%;
  max-height: 100%;
 }
  
.info {
position: absoulute;
width: 100%;
height: 100;
bottom: 10px;
right: 10px
}
<div class="row halves">
  <div class="column sand p1">
    <img src="https://imgur.com/kgbkNDy.png" />
    <div class="info">
      <h3>Project one</h3>
    </div>
  </div>
</div>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • This has been asked before, and I believe this [link](https://stackoverflow.com/a/2015081/8020765) will help you out. Like [Sam Willis](https://stackoverflow.com/users/3909886/sam-willis) mentioned, you're going to want to look at relative positioning of your div. – Joe Jul 26 '18 at 14:39

1 Answers1

1

Add position: relative; to the element that you want to dictate the sizing.

Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • I've tried using position relative, however, it still does not work correctly for what I'm trying to do. I want to recreate the following boxes on this website - https://www.makereign.com/ –  Jul 26 '18 at 15:01
  • You have the spelling error of `absolute` and you need to set the height to `100%` rather than just `100`. Try fixing those whilst adding the `position: relative` that I mentioned – Sam Willis Jul 26 '18 at 16:26
  • please don't automatically approve edits like you did here: https://stackoverflow.com/review/suggested-edits/23722494 .. the code is about inline-block and removing the whitespace will create issue – Temani Afif Aug 06 '19 at 10:13