How to make button and checkbox fixed on the bottom of a DIV

user_8915956 0
Viewed 1329

How can I have my button and checkbox fixed at the bottom of my div. I am able to get my scroll-able working as well. My problem is the button and the checkbox are not fixed at the bottom.

So when I populate the div with text, the text overflows the button and the checkbox but how can I make the text be contained in the scroll-able and not overflow the button and the checkbox?

#chk {
  float: left
}

.btn {
  float: right
}
<div style="height:40%; overflow: scroll;" class="panel" id="panel">

 <!--inner part of the div which contains the text (scrollable is applied here) -->

  <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div -->

  <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)-->

</div>

css html
3 Answers

Note that I have added a wrapper div around the two interactive element. Let me know if you have any limitation in the markup that doesn't allow you to wrap them in a container and we'll find another solution in that case.

#panel {
  position:relative;
  padding-bottom: 2rem;
}
    
.panel-bottom {
  position: absolute;
  bottom: 0;
  width: 95%; /* to be resized as it suits you */
  background-color: white;
  height: 2rem;
  padding: .5rem;
}
#chk {
  position: absolute;
  left: 0;
}
.btn {
  position: absolute;
  right: 0;
}
<div style="height:40%; overflow: scroll;" class="panel" id="panel">

inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)inner part of the div which contains the text (scrollable is applied here)


  <div class="panel-bottom">
    <input id="chk" type="checkbox" />
    <button type="submit" class="btn">Button</button>
  </div>

</div>

user_46032950

I hope this is what you are looking for:

Keep the input and the button elements out of your .panel div:

<div style="height:40%; overflow-y: scroll;" class="panel" id="panel">

 <!--inner part of the div which contains the text (scrollable is applied here) -->

</div>
<div id = "inpAndBtn">
  <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div -->

  <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)-->
</div>

And add the following styles:

body {
  height: 100vh;
}

#chk {
  float: left
}

.btn {
  float: right
}
user_80313100

The parent container should be positioned relative.

<div style="height:300px;position:relative;" class="panel" id="panel">
    <div style="height:250px; overflow-y: scroll;">
 <!--inner part of the div which contains the text (scrollable is applied here) -->
    <div>
 <div style="position:absolute;bottom:0;height:50px;" >
  <input id="chk" type="checkbox" /> <!-- should be on the left bottom of the div -->
  <button type="submit" class="btn">Button</button> <!--should be on the right bottom of the div (opposite the checkbox)-->
  </div>
</div>
user_77502890
Related