Button covers the space of the div

Question

I have a parent div and it has two child divs, the 1st child div contains an editor and 2nd child div contains a button. The parent div has position: relative; and the 2nd child of it has position: absolute; and its on the bottom right side. What I am experiencing is the button covers the content of 1st child div which I don't want. I want the editor div should cover all the space instead of the button. I used padding and margin on the button but it's not working, any suggestions?

One thing to mention is I can't use the button in 1st child div because it's a Vue component and just only gives me 1 <editor /> tag.

Try to add content to the 1st child div (the button will cover the content).

.parent {
  background: lightgrey;
  position: relative;
}
.child-1 {
  border: 1px solid grey;
  min-height: 50px;
  height: auto;
}
.child-2 {
  position: absolute;
  bottom: 0;
  right:0;
}
.editor-bar {
  border: 1px solid;
}
.editor-bar th {
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.editor-bar th:hover {
  background: grey;
}
.editor-body {
  background: #eee;
}
button {
  padding: 10px 15px;
  background: lightgreen;
  outline: none;
}

<div class="parent">
  <div class="child-1">
    <div class="editor">
      <div class="editor-bar">
        <table border="1">
          <tr>
            <th>B</th>
            <th>I</th>
            <th>U</th>
            <th><del>S</del></th>
          </tr>
        </table>
      </div>
      <div class="editor-body" contenteditable="true" spellcheck="false">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in. Nesciunt aliquid sapiente eum reiciendis ipsam.
      </div>
    </div>
  </div>
  <div class="child-2">
    <button>Send</button>
  </div>
</div>

No, I want the content not cover the button only but it should cover all the space instead of the button. — ok., Aug 17 '19 at 15:44
you want this: https://stackoverflow.com/questions/19770925/floating-an-image-to-the-bottom-right-with-text-wrapping-around ? — Temani Afif, Aug 17 '19 at 15:48

Temani Afif · Accepted Answer · 2021-02-17T10:03:15.070

You can do this using shape-outside but since the content is dynamic you will need some JS to dynamically adjust the height of the element.

The trick is to use a pseudo element floating on the right and having 100% parent height and you use shape-outside to create a polygon that will cover only the area of the button.

var editor = document.querySelector('.editor-body')

editor.style.setProperty("--h",editor.clientHeight+"px");

window.onresize = function(event) {
   editor.style.setProperty("--h",editor.clientHeight+"px");
};

.parent {
  background: lightgrey;
  position: relative;
}
.child-1 {
  border: 1px solid grey;
  min-height: 50px;
  height: auto;
}
.child-2 {
  position: absolute;
  bottom: 0;
  right:0;
}
.editor-bar {
  border: 1px solid;
}
.editor-bar th {
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.editor-bar th:hover {
  background: grey;
}
.editor-body {
  background: #eee;
  text-align:justify;
}
button {
  padding: 10px 15px;
  background: lightgreen;
  outline: none;
}

.editor-body:before {
  content:"";
  float:right;
  width:65px; /*width of the button*/
  height:var(--h,100px);
  /*35px is the height of the button*/
  shape-outside:polygon(0 calc(100% - 35px),100% calc(100% - 35px),100% 100%,0 100%);
}

<div class="parent">
  <div class="child-1">
    <div class="editor">
      <div class="editor-bar">
        <table border="1">
          <tr>
            <th>B</th>
            <th>I</th>
            <th>U</th>
            <th><del>S</del></th>
          </tr>
        </table>
      </div>
      <div class="editor-body" contenteditable="true" spellcheck="false">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in. Nesciunt aliquid sapiente eum reiciendis ipsam.
      </div>
    </div>
  </div>
 <div class="child-2">
    <button>Send</button>
  </div>
</div>

UPDATE

An improvement of the above without JS. I will rely on flexbox to be able to use height:100% but I will need an extra wrapper for this (more detail here: https://dev.to/afif/float-to-the-bottom-corners-i8l)

.parent {
  background: lightgrey;
  position: relative;
}
.child-1 {
  border: 1px solid grey;
  min-height: 50px;
  height: auto;
}
.child-2 {
  position: absolute;
  bottom: 0;
  right:0;
}
.editor-bar {
  border: 1px solid;
}
.editor-bar th {
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.editor-bar th:hover {
  background: grey;
}
.extra {
  display:flex;
}
.editor-body {
  background: #eee;
  text-align:justify;
}
button {
  padding: 10px 15px;
  background: lightgreen;
  outline: none;
}

.editor-body:before {
  content:"";
  float:right;
  width:65px; /*width of the button*/
  height:100%;
  /*35px is the height of the button*/
  shape-outside:inset(calc(100% - 35px) 0 0 0);
}

<div class="parent">
  <div class="child-1">
    <div class="editor">
      <div class="editor-bar">
        <table border="1">
          <tr>
            <th>B</th>
            <th>I</th>
            <th>U</th>
            <th><del>S</del></th>
          </tr>
        </table>
      </div>
      <div class="extra">
      <div class="editor-body" contenteditable="true" spellcheck="false">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in. Nesciunt aliquid sapiente eum reiciendis ipsam.
      </div>
      </div>
    </div>
  </div>
  <div class="child-2">
    <button>Send</button>
  </div>
</div>

raman · Answer 2 · 2019-08-17T15:48:09.210

Adding padding-bottom to the .parent class should work.

.parent {
  background: lightgrey;
  position: relative;
  padding-bottom: 35px;
}
.child-1 {
  border: 1px solid grey;
  min-height: 50px;
  height: auto;
}
.child-2 {
  position: absolute;
  bottom: 0;
  right:0;
}
.editor-bar {
  border: 1px solid;
}
.editor-bar th {
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.editor-bar th:hover {
  background: grey;
}
.editor-body {
  background: #eee;
}
button {
  padding: 10px 15px;
  background: lightgreen;
  outline: none;
}

<div class="parent">
  <div class="child-1">
    <div class="editor">
      <div class="editor-bar">
        <table border="1">
          <tr>
            <th>B</th>
            <th>I</th>
            <th>U</th>
            <th><del>S</del></th>
          </tr>
        </table>
      </div>
      <div class="editor-body" contenteditable="true" spellcheck="false">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in. Nesciunt aliquid sapiente eum reiciendis ipsam.
      </div>
    </div>
  </div>
  <div class="child-2">
    <button>Send</button>
  </div>
</div>

I am sorry for the inconvenience, I have edited the question, can you update accordingly? I want the editor div should cover all the space instead of the button. — ok., Aug 17 '19 at 15:48

score -1 · Answer 3 · answered Aug 17 '19 at 15:48

Move the button inside the text div

In code pen (https://codepen.io/omergal/pen/JjPKrRm)

.parent {
  background: lightgrey;
  position: relative;
}
.child-1 {
  border: 1px solid grey;
  min-height: 50px;
  height: auto;
}
.child-2 {
/*   position: absolute; */
  text-align: right;
  bottom: 0;
  right:0;
}
.editor-bar {
  border: 1px solid;
}
.editor-bar th {
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}
.editor-bar th:hover {
  background: grey;
}
.editor-body {
  background: #eee;
}
button {
  padding: 10px 15px;
  background: lightgreen;
  outline: none;
}

<div class="parent">
  <div class="child-1">
    <div class="editor">
      <div class="editor-bar">
        <table border="1">
          <tr>
            <th>B</th>
            <th>I</th>
            <th>U</th>
            <th><del>S</del></th>
          </tr>
        </table>
      </div>
      <div class="editor-body" contenteditable="true" spellcheck="false">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in, nihil tempora delectus? Quidem praesentium fugiat adipisci quos excepturi ducimus dolorem et doloribus cumque!
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt aliquid sapiente eum reiciendis ipsam temporibus in. Nesciunt aliquid sapiente eum reiciendis ipsam.
        <div class="child-2">
        <button>Send</button>
      </div>
      </div>
      
    </div>
  </div>
</div>

Button covers the space of the div

3 Answers3

Move the button inside the text div