Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

Question

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content:

html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.sidebar {
  background-color: #FFF5BA;
  width: 200px;
}

.main {
  background-color: rgba(248, 248, 248, 1);
  flex-grow: 1;
}

Here is the corresponding HTML structure:

<div class="container">
    <div class="sidebar">
    <div class="main">
</div>

The issue arises when additional content is dynamically added to the main section using JavaScript. Once there is enough content to necessitate scrolling, the sidebar fails to expand accordingly as you scroll down.

Although it would be optimal for the sidebar to remain fixed and scroll along with the page, I have come across information suggesting that combining flexbox with position: fixed may not be viable.

If you require complete details, please refer to the following link: https://codepen.io/wulfenn/pen/LYNRNEv (please excuse any untidy code as I am still in the learning phase)

Your assistance is greatly appreciated!

javascript html css

Answer 1

Answer №1

I made changes to the html code by relocating the modal code outside of the container class.

Additionally, I applied the position:sticky property to the sidebar class and set its height to 100vh in order to prevent scrolling when the main content exceeds the 100vh height limit.

To increase the height of the main content, I also inserted a placeholder book-add div.

For full results viewing, switch to fullscreen mode and only the first add button will be functional.

// Object constructor declaration
function Book(title, author, pages, isbn, read, bookURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.isbn = isbn;
  this.read = read;
  this.bookURL = bookURL;
}

// Prototype method to toggle status
Book.prototype.toggleStatus = function () {
  if (this.read == 'Read') {
    this.read = 'Not Read';
    return 1;
  } else if (this.read == 'Not Read') {
    this.read = 'Reading';
    return 2;
  } else if (this.read == 'Reading') {
    this.read = 'Read';
    return 3;
  }
}

// Initialize library variables
let myLibrary = [];
const container = document.querySelector('.books-container');

// Displaying and hiding the "Add a Book" form
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');

addBtn.addEventListener('click', function () {
  popup.style.display = 'block'; // Show
})

cancelBtn.addEventListener('click', function () {
  popup.style.display = 'none'; // Hide
})

/* Rest of the JavaScript code for managing books and book entries goes here... */

@import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");

/* Custom CSS styling for the layout */
.container {
  /* Add custom CSS styles for the container */
}

.sidebar {
  /* Add custom styling for the sidebar */
}

.main {
  /* More custom styling for the main section */
}

/* Continue with specific CSS rules for different elements and classes */

<div class="container">

  <div class="sidebar">
    <div class="my-library">My Library</div>
    <div class="menu">Home</div>
  </div>

  <div class="main">
    <div class="books-container">
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <!-- Additional book-add divs with add buttons -->
    </div>
  </div>
</div>

<!-- Additional HTML code for the interactive book form -->

Answer 2

I made changes to the html code by relocating the modal code outside of the container class.

Additionally, I applied the position:sticky property to the sidebar class and set its height to 100vh in order to prevent scrolling when the main content exceeds the 100vh height limit.

To increase the height of the main content, I also inserted a placeholder book-add div.

For full results viewing, switch to fullscreen mode and only the first add button will be functional.

// Object constructor declaration
function Book(title, author, pages, isbn, read, bookURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.isbn = isbn;
  this.read = read;
  this.bookURL = bookURL;
}

// Prototype method to toggle status
Book.prototype.toggleStatus = function () {
  if (this.read == 'Read') {
    this.read = 'Not Read';
    return 1;
  } else if (this.read == 'Not Read') {
    this.read = 'Reading';
    return 2;
  } else if (this.read == 'Reading') {
    this.read = 'Read';
    return 3;
  }
}

// Initialize library variables
let myLibrary = [];
const container = document.querySelector('.books-container');

// Displaying and hiding the "Add a Book" form
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');

addBtn.addEventListener('click', function () {
  popup.style.display = 'block'; // Show
})

cancelBtn.addEventListener('click', function () {
  popup.style.display = 'none'; // Hide
})

/* Rest of the JavaScript code for managing books and book entries goes here... */

@import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");

/* Custom CSS styling for the layout */
.container {
  /* Add custom CSS styles for the container */
}

.sidebar {
  /* Add custom styling for the sidebar */
}

.main {
  /* More custom styling for the main section */
}

/* Continue with specific CSS rules for different elements and classes */

<div class="container">

  <div class="sidebar">
    <div class="my-library">My Library</div>
    <div class="menu">Home</div>
  </div>

  <div class="main">
    <div class="books-container">
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <!-- Additional book-add divs with add buttons -->
    </div>
  </div>
</div>

<!-- Additional HTML code for the interactive book form -->

Align two DIVs in the correct layout: One as a sidebar that remains fixed, and the other as an expanding element

Answer №1

Similar questions

What might be causing the excessive margins in my Bootstrap grid layout?

Tips for Implementing Multi-Level/Nested in Ajax Requests

What happens when browsers encounter unfamiliar at-rules?

Guide to modifying Button on fetch response in React Native

Search for documents using jQuery on the page

iPhone-compatible iFrame with adaptable webpage dimensions

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

Exploring the differences between scoping with let and without any scoping in

What is the best way to alter the background-color of an element that is contained within a GatsbyJS component, depending on the specific page where the component is being utilized?

Limiting the size of image uploads in AWS S3

Enhancing Bootstrap with VueJS for better component ordering

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Retrieving user email with Vue.js from Firebase

Issues with Bootstrap Toggle Button functionality

Having trouble connecting to the http json service in AngularJS

What is the method for setting a default image to be preloaded in filepond?

JavaScript encounters an unexpected identifier: Syntax Error

Unable to locate element in Internet Explorer when using frame switching within Selenium

ReactPlayer allows for the simultaneous playback of two files

Hide modal once form has been successfully submitted