Arrange two divs next to each other on the page: the div on the right can be scrolled through, while the div on the

Question

Arrange two divs next to each other on the page: the div on the right can be scrolled through, while the div on the

I am attempting to create a layout similar to this

https://i.sstatic.net/Y1FCp.png

My goal is to:

Have two main divs positioned side by side inside a wrapper div
Ensure the wrapper expands to fill 100% of the browser size
The left div (banner) should be fixed and overlayed, acting as a vertical navigation container. When the list of items exceeds the visible area without scrolling, the div should expand in height accordingly
The right div (content) should have overflow:auto so that if its content exceeds the allowed height (browser height), users can scroll down to view the rest while keeping the left div fixed in place

I've spent some time working on a solution, here is what I have come up with so far:

<style>
    html, body {
        height: auto;
    }
    #wrapper {
        overflow: hidden;
        height: 100%;
    }
    div#banner {
        width: 35%;
        float: left;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
        overflow:hidden;
        height:100%;
        background: rgba(0, 0, 0, 0.74);
        z-index: 999;
    }
    div#content {
        width: 65%;
        float: left;
        background-color: grey;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
        overflow:auto;
        background: blue;
        height:100%;
        color:white;
    }
</style>
<div id="wrapper">
    <div id="banner">
      <header>
            header content
        </header>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text...
    </div>
    <div id="content" style="">
        right
        text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<b...
    </div>
</div>

(update) https://jsfiddle.net/nze5ug5t/5/

Is there a better way to achieve this layout?

html css

Answer 1

Answer №1

It's impossible to achieve this without incorporating JavaScript into the solution. To handle different scenarios based on viewport height, left column height, right column height, and scroll position, specific CSS rules must be applied. While this method may require further fine-tuning, the following code snippet outlines a potential approach:

document.checkBanner = function() {
  var ch = $('.contentWrapper').innerHeight(),
    left = $('.left-banner-content'),
    lh = left.innerHeight(),
    s = $(document).scrollTop(),
    wh = $(window).height();
  if (wh > lh) {
    left.css({
      'top': s + 'px'
    })
  } else {
    if ((s + wh) > lh) {
      left.css({
        'top': (s + wh - lh - 20) + 'px'
      });
    } else {
      left.css({
        'top': 0
      });
    }
  }
  if ($(document).height() > ch) {
    $(document).scrollTop(ch - wh);
  }
}
$(document).scroll(function() {
  document.checkBanner();
});
$(document).resize(function() {
  document.checkBanner();
});

body {
  margin: 0;
}
.wrapper {
  margin: 0;
  position: relative;
}
.left-banner {
  position: absolute;
  min-height: 100%;
  height: 100%;
  width: 210px;
  background-color: rgba(0, 76, 0, .84);
  color: white;
}
.left-banner-content {
  position: relative;
  padding: 0 20px 5px;
}
.contentWrapper {
  padding-left: 210px;
  min-height: 100%;
  background-image: url(http://www.plafondchauffant.fr/modules/pm_advancedbackgroundchanger/uploads/slides/53d177879b0e2.jpg);
  -webkit-background-size: cover;
  background-size: cover;
}
.content {
  min-height: 100vh;
  background: rgba(255, 255, 255, .9);
  padding: 0 20px;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left-banner">
    <div class="left-banner-content">
      <h3>This is left banner</h3>
      <ul>
        <li>some item</li>
        <li>some other item</li>
        <li>yet another item</li>
        <li>and another one</li>
      ... (truncated for brevity)
      </ul>
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      <h1>This is content</h1>
      <p>Ennui pinterest kogi freegan +1, try-hard leggings pickled chillwave chartreuse raw denim 8-bit brooklyn... (truncated for brevity)</p>

      <p>Actually selvage before they sold out, affogato dreamcatcher squid taxidermy chia cornhole deep v ethical meggings quinoa... (truncated for brevity)</p>

      <p>Locavore kickstarter freegan, pinterest authentic celiac portland four dollar toast affogato cray kogi hashtag direct trade... (truncated for brevity)</p>

      <p>Cronut mixtape +1 YOLO helvetica bicycle rights. Offal polaroid authentic mixtape vinyl... (truncated for brevity)</p>
    </div>
  </div>
</div>

UPDATE: While addressing rendering issues with the previously mentioned solution, I discovered an existing implementation that tackles similar challenges. Meet lockfixed, elegantly packaged as a jQuery plugin. It's always advisable to search for existing solutions before reinventing the wheel :).

Cheers!

Answer 2

It's impossible to achieve this without incorporating JavaScript into the solution. To handle different scenarios based on viewport height, left column height, right column height, and scroll position, specific CSS rules must be applied. While this method may require further fine-tuning, the following code snippet outlines a potential approach:

document.checkBanner = function() {
  var ch = $('.contentWrapper').innerHeight(),
    left = $('.left-banner-content'),
    lh = left.innerHeight(),
    s = $(document).scrollTop(),
    wh = $(window).height();
  if (wh > lh) {
    left.css({
      'top': s + 'px'
    })
  } else {
    if ((s + wh) > lh) {
      left.css({
        'top': (s + wh - lh - 20) + 'px'
      });
    } else {
      left.css({
        'top': 0
      });
    }
  }
  if ($(document).height() > ch) {
    $(document).scrollTop(ch - wh);
  }
}
$(document).scroll(function() {
  document.checkBanner();
});
$(document).resize(function() {
  document.checkBanner();
});

body {
  margin: 0;
}
.wrapper {
  margin: 0;
  position: relative;
}
.left-banner {
  position: absolute;
  min-height: 100%;
  height: 100%;
  width: 210px;
  background-color: rgba(0, 76, 0, .84);
  color: white;
}
.left-banner-content {
  position: relative;
  padding: 0 20px 5px;
}
.contentWrapper {
  padding-left: 210px;
  min-height: 100%;
  background-image: url(http://www.plafondchauffant.fr/modules/pm_advancedbackgroundchanger/uploads/slides/53d177879b0e2.jpg);
  -webkit-background-size: cover;
  background-size: cover;
}
.content {
  min-height: 100vh;
  background: rgba(255, 255, 255, .9);
  padding: 0 20px;
  overflow-y: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left-banner">
    <div class="left-banner-content">
      <h3>This is left banner</h3>
      <ul>
        <li>some item</li>
        <li>some other item</li>
        <li>yet another item</li>
        <li>and another one</li>
      ... (truncated for brevity)
      </ul>
    </div>
  </div>
  <div class="contentWrapper">
    <div class="content">
      <h1>This is content</h1>
      <p>Ennui pinterest kogi freegan +1, try-hard leggings pickled chillwave chartreuse raw denim 8-bit brooklyn... (truncated for brevity)</p>

      <p>Actually selvage before they sold out, affogato dreamcatcher squid taxidermy chia cornhole deep v ethical meggings quinoa... (truncated for brevity)</p>

      <p>Locavore kickstarter freegan, pinterest authentic celiac portland four dollar toast affogato cray kogi hashtag direct trade... (truncated for brevity)</p>

      <p>Cronut mixtape +1 YOLO helvetica bicycle rights. Offal polaroid authentic mixtape vinyl... (truncated for brevity)</p>
    </div>
  </div>
</div>

UPDATE: While addressing rendering issues with the previously mentioned solution, I discovered an existing implementation that tackles similar challenges. Meet lockfixed, elegantly packaged as a jQuery plugin. It's always advisable to search for existing solutions before reinventing the wheel :).

Cheers!

Answer 3

Answer №2

Depending on the context, the answer to your query may vary significantly. Is this the desired outcome you are aiming for?

Link to Example

The following CSS code demonstrates the use of position: absolute along with specifying values for top, right, bottom, and left. It also includes instructions for handling overflow-x and overflow-y.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: arial;
}
.header {
  padding: 1rem;
  font-weight: bolder;
}
.wrapper {
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid black;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20%;
  border: 1px solid green;
  overflow-x: hidden;
  overflow-y: scroll;
}
.menu-item {
  margin: 1rem;
  padding: 0.5rem;
}
.menu-item:hover {
  color: white;
  background-color: #505050;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20%;
  border: 1px solid blue;
  overflow-y: scroll;
}
.content p {
  margin: 1rem;
}

Answer 4

Depending on the context, the answer to your query may vary significantly. Is this the desired outcome you are aiming for?

Link to Example

The following CSS code demonstrates the use of position: absolute along with specifying values for top, right, bottom, and left. It also includes instructions for handling overflow-x and overflow-y.

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: arial;
}
.header {
  padding: 1rem;
  font-weight: bolder;
}
.wrapper {
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid black;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 20%;
  border: 1px solid green;
  overflow-x: hidden;
  overflow-y: scroll;
}
.menu-item {
  margin: 1rem;
  padding: 0.5rem;
}
.menu-item:hover {
  color: white;
  background-color: #505050;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 20%;
  border: 1px solid blue;
  overflow-y: scroll;
}
.content p {
  margin: 1rem;
}

Arrange two divs next to each other on the page: the div on the right can be scrolled through, while the div on the

Answer №1

Answer №2

Similar questions

Is it possible to include padding within a textarea element?

PHP - Unable to store the input content

If a span element does not exist, a bullet can be added within it

Using CSS to style PHP function results

Bootstrap allows you to create a responsive grid

Dimensions of Titles (H1, H2 etc)

What is the method for determining the width of a Mat-Table once it has been displayed?

Is it possible to use a JQuery function after a page redirect has occurred

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

How to eliminate looping animations with jQuery

Steps for implementing a conditional statement to handle an empty string in HTML

Conflict between jQuery and dynamically changing page content

Having trouble displaying data from a MongoDB database using ng-repeat in AngularJS

Is there a way for me to determine if a user has engaged with a form?

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

Can you please explain the primary distinction between these two identification numbers?

Creating a hierarchical structure in HTML to represent a JSON object as a tree: techniques and best practices

Deactivate event handling for viewport widths below a specified threshold

What is the best way to vertically align my image for perfect centering?

Is it possible to align an entire column to the right in the Material UI Data Grid?