0

I can't find an ideal solution for positioning a child element to the bottom right of its parent.

https://jsfiddle.net/oq4hycdt/1/

HTML

#border {
  border: 5px solid #101010;
  background-color: white;
  position: relative;
  margin: auto;
  width: 700px;
  padding: 0px 15px 0px 15px;
}

.block {
  position: relative;
  border: 1px solid black;
  border-style: none none solid none;
  padding: 0px 0px 10px 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.stuff {
  border: 2px solid black;
  position: relative;
  margin: 0% 0% 0% 0%;
  float: right;
  right: 10px;
  bottom: 0;
  line-height: 0;
}

form {
  margin: 0% 0% 5px 0%;
  border: 2px solid black;
  float: left;
}
<div id="border">

  <div class="block">
    <h3>header1</h3>
    <form>
      <input name="A" type="radio">1<br>
      <input name="A" type="radio">2<br>
      <input name="A" type="radio">3
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

  <div class="block">
    <h3>header2</h3>
    <form>
      <input name="B" type="radio">1<br>
      <input name="B" type="radio">2<br>
      <input name="B" type="radio">3<br>
      <input name="B" type="radio">4<br>
      <input name="B" type="radio">5
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

  <div class="block">
    <h3>header3</h3>
    <form>
      <input name="C" type="radio">this is a really really really really really really really really really really really long line
    </form>
    <div class="stuff">
      <h4>stuff</h4>
      <input type="range" min="0" max="100" value="50">
      <input type="checkbox">Check
    </div>
  </div>

</div>

I'm trying to get the stuff class element to move to the bottom right of its parent block element and to expand the parent elements height if there is no room. If i use absolute positioning for the stuff class there is overlay between the text of the radio input and the content of the stuff element. If i use relative positioning then the stuff element doesn't seem to obey the bottom property.

connexo
  • 53,704
  • 14
  • 91
  • 128
JACR
  • 23
  • 7
  • 1
    try using `display:flex` on the parent & `margin-top:auto` on the child element that you want at the bottom of the parent. – admcfajn Jan 15 '19 at 22:03
  • you can use this https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div with with the properties bottom and right – qleoz12 Jan 15 '19 at 22:08

2 Answers2

0

you can do the layout I think you are looking for by adding this to your css:

h3 {width: 100%};

.block {
  display: flex;
  flex-wrap: wrap; 
}

.stuff {
  align-self: flex-end;
  margin-left: auto;
}

working fiddle: https://jsfiddle.net/75nv0we4/

JustH
  • 1,372
  • 8
  • 8
0

Use flex-box on the container which will contain both 'form' and '.stuff' div.

Use justify-content to align the content according to your need. Check included code snippet.

#border {
 border: 5px solid #101010;
 background-color: white;
 position: relative;
 margin: auto;
 width: 700px;
 padding: 0px 15px 0px 15px;
}

.block {
  position: relative;
 border: 1px solid black;
 border-style: none none solid none;
 padding: 0px 0px 10px 0px;
 overflow-x: hidden;
 overflow-y: auto;
}

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



.stuff {
 border: 2px solid black;
 margin: 0% 0% 0% 0%;
  right: 10px;
 bottom: 0;
 line-height: 0;
}

form {
 margin: 0% 0% 5px 0%;
 border: 2px solid black;
 float: left;
}
<div id="border">

<div class="block">
 <h3>header1</h3>
 <div class="flex-container">
  <form>
   <input name="A" type ="radio">1<br>
   <input name="A" type ="radio">2<br>
   <input name="A" type ="radio">3
  </form>
  <div class="stuff">
   <h4>stuff</h4>
   <input type="range" min="0" max="100" value="50">
   <input type="checkbox">Check
  </div>
 </div>
</div>

<div class="block">
 <h3>header2</h3>
 <div class="flex-container">
  <form>
   <input name="B" type ="radio">1<br>
   <input name="B" type ="radio">2<br>
   <input name="B" type ="radio">3<br>
   <input name="B" type ="radio">4<br>
   <input name="B" type ="radio">5
  </form>
  <div class="stuff">
  <h4>stuff</h4>
  <input type="range" min="0" max="100" value="50">
  <input type="checkbox">Check
 </div>
</div>

<div class="block">
 <h3>header3</h3>
 <div class="flex-container">
  <form>
   <input name="C" type ="radio">this is a really really really really really really really really really really really long line
  </form>
  <div class="stuff">
   <h4>stuff</h4>
   <input type="range" min="0" max="100" value="50">
   <input type="checkbox">Check
  </div>
 </div>
 </div>
</div>
user1579234
  • 501
  • 5
  • 15