Element goes out of DIV - html

Question

I am getting very annoyed because I cannot figure out where the problem with the styling is. My btnBox div keeps going outside of the noteBoxes div, I have messed around with it for more than an hour and still cannot solve the problem, don't worry about the js, sorry bout that. I just need help putting the btnBox div inside the noteBoxes div and to the right of the textarea. Any help is appreciated.
/* textarea styling for notes */
.notesE {
width: 478px;
max-width: 478px;
height: 100px;
margin: 0 auto;
margin-left: 0;
border: none;
padding: 5px;
overflow: hidden;
resize: none;
clear: both;
}
.btnBox {
height: 100px;
border: none;
width: 11px;
clear: both;
top: 0px;
}
/* remove note button */
.removeNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #fc7979;
border: none;
cursor: pointer;
margin-top: -4px;
margin-left: 0;
clear: both;
}
.saveNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #46e68b;
border: none;
cursor: pointer;
clear: both;
}
/* div that holds note and button and date */
.noteBoxes {
width: 510px;
height: 128px;
margin-bottom: 15px;
}
.dateTxt {
margin-bottom: 0;
margin-top: 0;
color: #ccc;
}
<div id="custNotes" style="width: 550px; margin: 0 auto;">
<h3>
<!-- Customer Value-->Notes</h3>
<button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
<p id="Message"></p>
<div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
<div id="notesBox" style="padding: 10px; width: 510px;">
<!-- <div class="btnBox" style="width: 10px; height: 100px;">
<button class="saveNote"></button>
<button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button>
</div> -->
</div>
</div>
</div>

Answer 1

You appear to have a default height set on noteboxes, so when the button box renders it renders beyond the default height. If you remove the default height the noteboxes will stretch to contain the buttonboxes. Is that what you are looking for?
var noteCount = 0;
function addNote(style) {
const notesBox = document.getElementById('notesBox');
var noteBoxes = document.createElement('div');
textarea = document.createElement('textarea'),
btnBox = document.createElement('div'),
save = document.createElement('button'),
remove = document.createElement('button'),
today = new Date();
var txtElement = document.createElement('p');
var dateString = '' + today.toLocaleDateString() + ' ' + today.getHours() + ':' + today.getMinutes();
txtElement.innerHTML = dateString;
txtElement.setAttribute('class', style);
txtElement.className = 'dateTxt';
txtElement.setAttribute('id', style);
txtElement.id = 'note ' + noteCount + ' date';
txtElement.setAttribute('data-month', today.getMonth() + 1);
txtElement.setAttribute('data-year', today.getFullYear());
// div that holds each note and remove button and date
notesBox.appendChild(noteBoxes);
noteBoxes.setAttribute('class', style);
noteBoxes.className = 'noteBoxes';
noteBoxes.setAttribute('id', style);
noteBoxes.id = 'note box ' + noteCount;
noteBoxes.appendChild(txtElement);
noteBoxes.appendChild(textarea);
noteBoxes.appendChild(btnBox);
// note that is added
textarea.setAttribute('class', style);
textarea.className = 'notesE';
textarea.setAttribute('id', style);
textarea.id = 'note' + noteCount;
// button box
btnBox.setAttribute('class', style);
btnBox.className = 'btnBox';
btnBox.setAttribute('id', style);
btnBox.id = 'btnBox' + noteCount;
btnBox.appendChild(save);
btnBox.appendChild(remove);
// save button
save.setAttribute('title', style);
save.title = 'save';
save.setAttribute('class', style);
save.className = 'saveNote';
save.setAttribute('id', style);
save.id = '+Note' + noteCount;
// button to remove note
remove.setAttribute('title', style);
remove.title = 'delete';
remove.setAttribute('class', style);
remove.className = 'removeNote';
remove.setAttribute('id', style);
remove.id = '-Note' + noteCount;
remove.onclick = function() {
// confirm alert dialog
// deletes the note if user selects 'OK'
if (confirm("Are you sure you want to delete this note?") == true) {
// removes the noteBoxes div of which the button clicked is in.
this.parentElement.remove();
}
}
noteCount++;
console.log(textarea.id);
var month = document.getElementById('selectMonth');
var year = document.getElementById('selectYear');
var searchDate = document.getElementById('searchDate');
}
/* textarea styling for notes */
.notesE {
width: 478px;
max-width: 478px;
height: 100px;
margin: 0 auto;
margin-left: 0;
border: none;
padding: 5px;
overflow: hidden;
resize: none;
clear: both;
}
.btnBox {
height: 100px;
border: none;
width: 11px;
clear: both;
top: 0px;
}
/* remove note button */
.removeNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #fc7979;
border: none;
cursor: pointer;
margin-top: -4px;
margin-left: 0;
clear: both;
}
.saveNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #46e68b;
border: none;
cursor: pointer;
clear: both;
}
/* div that holds note and button and date */
.noteBoxes {
width: 510px;
margin-bottom: 15px;
}
.dateTxt {
margin-bottom: 0;
margin-top: 0;
color: #ccc;
}
<div id="custNotes" style="width: 550px; margin: 0 auto;">
<h3>
<!-- Customer Value-->Notes</h3>
<button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
<p id="Message"></p>
<div class="notesScroll" style="width: 550px; background-color: #606060; margin: 0 auto;">
<div id="notesBox" style="padding: 10px; width: 510px;">
<!-- <div class="btnBox" style="width: 10px; height: 100px;">
<button class="saveNote"></button>
<button class="removeNote" style="margin-top: -4px; margin-left: 0;"></button>
</div> -->
</div>
</div>
</div>

Answer 2

If you want a text-area and those two buttons on the right side of the text-area. Check the following changes ->
/* textarea styling for notes */
.notesE {
width: 478px;
max-width: 478px;
height: 100px;
margin: 0 auto;
margin-left: 0;
border: none;
padding: 5px;
overflow: hidden;
resize: none;
clear: both;
}
.btnBox {
height: 100px;
border: none;
width: 11px;
clear: both;
top: 0px;
float:right;
}
/* remove note button */
.removeNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #fc7979;
border: none;
cursor: pointer;
margin-top: -4px;
margin-left: 0;
clear: both;
}
.saveNote {
width: 10px;
height: 50px;
margin-left: 0;
margin-right: 0;
background-color: #46e68b;
border: none;
cursor: pointer;
clear: both;
}
/* div that holds note and button and date */
.noteBoxes {
width: 510px;
height: 128px;
}
.dateTxt {
margin-bottom: 0;
margin-top: 0;
color: #ccc;
}
.notesScroll{
width: 510px;
background-color: #606060;
margin: 0 auto;
height: 100px;
}
}
<div id="custNotes" style="width: 550px; margin: 0 auto;">
<h3>
<!-- Customer Value-->Notes</h3>
<button class="options" onclick="addNote()" style="margin-bottom: 10px;">add</button>
<p id="Message"></p>
<div class="notesScroll" >
<div id="notesBox" class= noteBoxes>
<div class="btnBox" >
<button class="saveNote"></button>
<button class="removeNote" style="margin-top: -4px; margin-left: 0;"> </button>
</div>
</div>
</div>
</div>