How to push DIVs down when they run out of screen space - html

Question

When I new books to the library, it generates a new div with the book information, however, when you spam the books, they will run out of screen space but they wont drop down. Just keep spamming the add book, notice how they got shrunk. It can be related to CSS settings. My book DIVs were not lining up horizontally, so I added
#book-list { display: flex; flex-direction:row }
How can I push the DIVs generated when they have no screen space left?
// ############ Selectors ############
const newBtn = document.querySelector('#newBtn');
const addBtn = document.querySelector('#addBtn');
const closeSpan = document.querySelector('.delete');
const display = document.querySelector('.display-lib');
//############ Listeners ############
// pop up the modal
newBtn.addEventListener('click', function () {
popUp.style.display = "block";
})
// closes the form
closeSpan.addEventListener('click', function () {
popUp.style.display = "none";
})
// closes the form when you click anywhere on the window
window.addEventListener('click', function (e) {
if (e.target == popUp) {
popUp.style.display = "none";
}
})
addBtn.addEventListener('click', function(){
const titleBook = document.querySelector('#title').value;
const authorBook = document.querySelector('#author').value;
const pagesBook = document.querySelector('#pages').value;
const notesBook = document.querySelector('#notes').value;
const readBook = document.querySelector('#read').checked;
if (titleBook === "" || authorBook === "" || pagesBook === "" || notesBook === "") {
showAlert("Please fill in all the blanks", 'error');
} else {
book = new Book(titleBook, authorBook, pagesBook, notesBook, readBook);
myLibrary.push(book);
displayBook(book);
showAlert("book is added", 'success');
}
event.preventDefault();
});
let myLibrary = [];
function Book(title, author, pages, notes, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.notes = notes;
this.read = read;
}
function addBookToLibrary() {
const titleBook = document.querySelector('#title').value;
const authorBook = document.querySelector('#author').value;
const pagesBook = document.querySelector('#pages').value;
const notesBook = document.querySelector('#notes').value;
const readBook = document.querySelector('#read').checked;
if(titleBook === "" && authorBook === "" && pagesBook === "" && notesBook === ""){
showAlert("Please fill in all the blanks", 'success');
} else {
book = new Book(titleBook, authorBook, pagesBook, notesBook, readBook);
myLibrary.push(book);
displayBook(book);
showAlert("book is added", 'success');
}
event.preventDefault();
}
function displayBook(book) {
const shelf = document.querySelector('#book-list');
const books = document.createElement('div');
const row = document.createElement('tr');
const makeTitle = document.createElement('p');
const makeAuthor = document.createElement('p');
const makePages = document.createElement('p');
const makeNotes = document.createElement('p');
const deleteBtn = document.createElement('button');
const readBox = document.createElement('checkbox');
books.classList.add('book');
makeTitle.classList.add("title");
makeAuthor.classList.add("author");
makePages.classList.add("pages");
makeNotes.classList.add("notes");
deleteBtn.classList.add("delete");
readBox.classList.add("switch");
makeTitle.innerHTML = `Title: ${book.title}`;
makeAuthor.innerHTML = `Author: ${book.author}`;
makePages.innerHTML = `Pages: ${book.pages}`;
makeNotes.innerHTML = `Notes: ${book.notes}`;
readBox.innerHTML = `Read: ${book.read}`;
row.appendChild(makeTitle);
row.appendChild(makeAuthor);
row.appendChild(makePages);
row.appendChild(makeNotes);
row.appendChild(deleteBtn);
row.appendChild(readBox);
shelf.appendChild(books);
books.appendChild(row);
const dltBtn = books.querySelector('.delete');
dltBtn.addEventListener('click', function (e) {
deleteBook(e.target);
showAlertDelete('book removed', 'success');
})
}
// ######### ALERTS FOR THE UI ###########
function showAlert(message, className) {
const div = document.createElement('div');
div.className = `alert ${className}`;
div.appendChild(document.createTextNode(message));
const form = document.querySelector('#form');
form.appendChild(div);
setTimeout(function () {
document.querySelector('.alert').remove();
}, 3000);
}
function showAlertDelete(message, className) {
const div = document.createElement('div');
div.className = `alert ${className}`;
div.appendChild(document.createTextNode(message));
const form = document.querySelector('.content');
form.appendChild(div);
setTimeout(function () {
document.querySelector('.alert').remove();
}, 3000);
}
// function that deletes the book. aims at parentElements
function deleteBook(target) {
if (target.className === 'delete') {
target.parentElement.parentElement.remove();
}
}
h1 {
display: flex;
justify-content: center;
}
.title {
display: flex;
justify-content: center;
padding-top: 4rem;
}
p {
display: flex;
justify-content: center;
padding-top: 1rem;
}
body {
background-color: #41b3a3;
}
.success,
.error {
color: white;
padding: 5px;
border-radius: 3px;
}
.error {
background: rgb(190, 0, 0);
}
.success {
background: green;
margin: auto;
}
/* Modal popup box https://www.w3schools.com/howto/howto_css_modals.asp */
/* The Modal (background) */
input#title {
height: 30px;
width: 200px;
font-size: 20px;
}
input#author {
height: 30px;
width: 200px;
font-size: 20px;
}
input#pages {
height: 30px;
width: 200px;
font-size: 20px;
margin-bottom: 20px;
}
input[type=checkbox] {
transform: scale(2);
}
#popUp {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
font-size: 30px;
}
/* Modal Content/Box */
#form {
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
width: 20%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.mark_as_read {
display: inline-block;
vertical-align: middle;
justify-content: center;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
vertical-align: middle;
justify-content: center;
margin: auto;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #41b3a3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
#switch_container {
display: flex;
justify-content: center;
}
/* Styles for the added book */
.book{
display:flex;
align-items: center;
padding: 15px;
margin: 20px;
background-color: #83d898;
border-radius: 20px;
}
.title {
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
}
.author {
font-size: 30px;
margin-bottom: 20px;
}
.pages {
font-size: 25px;
margin-bottom: 20px;
}
.notes {
font-size: 25px;
margin-bottom: 20px;
}
#book-list {
display: flex;
flex-direction: row;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.2/css/bulma.min.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Library</title>
</head>
<body>
<div class="content">
<h1 class="title">A Book Library</h1>
<p>A library project where you can store your books, coded for the Odin Project</p>
<div id="addBtn_container" class="has-text-centered">
<a id="newBtn" class="button is-primary is-inverted">Add a New Book</a>
</div>
<div id="popUp" >
<form id='form'>
<header class="modal-card-head">
<p class="modal-card-title">New Book</p>
<span class="delete" id="close" aria-label="close"></span>
</header>
<section class="modal-card-body">
<div id='textInput'>
<p><input type='text' id='title' name='title' placeholder='Title'></p>
<p><input type='text' id='author' name='author' placeholder='Author'></p>
<p><input type='text' id='pages' name='pages' placeholder='Pages'></p>
</div>
<p class="modal-card-title">Notes</p>
<textarea id='notes' class="textarea" placeholder="Notes"></textarea>
</section>
<footer class="modal-card-foot">
<span class="mark_as_read">Mark as read: </span>
<label class="switch">
<input type="checkbox" value="yes" id='read' name='read'>
<span class="slider round"></span>
</label>
<button class="button is-success is-rounded is-pulled-right" type='submit' form='form'
id='addBtn'>Add</button></div>
</footer>
</form>
</div>
</div>
<h1>MY BOOKS</h1>
<div class="display-lib">
<table>
<tbody id="book-list">
</tbody>
</table>
</div>
</tbody>
<script src="app.js"></script>
</body>
</html>

Answer 1

It is happening because you put the div into a table and it is not well formed. A table has to have <tr> and <td> to make the row and the cell, but the thing I recommend you is to get rid of <table> and <tbody>. Flex should be enough. Or if you need a two directions layout you could try grid instead. It is the new way to display things in a 'table way'.
You can make different things. Two of them are: removing <table> and <tbody> tags and changing them to just one <div> (with 100% width) or to make a well formed table with <tr>and <td> and checking the whole table width is your desired (100%).