What are some effective methods for creating a sidebar that allows content to scroll beneath it seamlessly?

My goal is to create a webpage with the following structure:

I want to display content in a large scrolling slideshow while allowing it to scroll left under a white sidebar. Although this may seem simple, I have experimented with various structures and am unsure of the most effective approach.

I have utilized a tile repeated-y in the body to achieve the desired visual effect, but I am struggling to adjust the z-index of the content wrapper beneath it. Additionally, I am attempting to make the sidebar 100% in height.

htmlcssz-index

Answer №1

If you're looking for a solution that works across different browsers, consider giving Flexbox a try. Although it may not be fully supported in older browsers, most newer browsers now support at least the "legacy" version of Flexbox.

Chrome already supports the new flexbox spec and Firefox will soon follow suit. Opting for the legacy version means you won't have to worry about compatibility issues with the new spec as they utilize separate options.

No matter which option you go with, Flexbox is sure to impress! I've personally used it in recent projects and found it to be a significant improvement over using floats :)

Best of luck!

Answer №2

Just wanted to share a quick tip with you - if you're in need of a temporary fix, consider fooling your layout into believing it's a table:

#wrapper-container {
    display: table;
    height: 100%;
}
#header { 
    display: table-row;
}
#content-wrapper {
    display: table-row;
    height: 100%;
}
#content-wrapper .left-column {
    display: table-cell;
}
#content-wrapper .right-column {
    display: table-cell;
}

This hasn't been tested yet, but by making some adjustments, it might just do the trick.

Answer №3

body {
 width:100%;
 height:100%;
 line-height: 1;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 font-weight:300;
}
.content_wrapper {
 width:960px;
 margin:0px auto 0px auto;
}
.side_bar {
 width:250px;
 height:100%;
 background:#efeff0;
 position:fixed; right:0px; top:94px;
}
<div class="content_wrapper clearfix">
    </div>
    <div class="side_bar">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Save your canvas image as a file and attempt to force a download, only to be met with a failure to

Is there a way to save a canvas as an image file and allow users to choose the format (png or jpg) for download without saving the file on the server? Here's what I have tried: JavaScript Code: $.ajax( { type : "POST", url : "../php/downloa ...

phpajaxhtmlcanvasforce-download

Stop the jQuery custom slide animation when there are no more items to display

I have designed a unique slider for users to view the work process https://i.sstatic.net/FLYne.png When a user clicks the button, the slider will move left or right depending on the button clicked. However, if the user clicks multiple times, the slider ma ...

javascripthtmljquerycss

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

htmlcss

Instructions on relocating a rectangle and capturing its coordinates globally for cropping the chosen image

I am currently a software engineering trainee, focusing on learning Angular CLI. My current project involves image cropping on a canvas, where I draw a circle when clicked. My query pertains to moving the circle with a mousedown event and stopping it upon ...

csshtmlangulartypescripthtml5-canvas

Compressed search bar when in mobile mode

My search bar is getting squashed on mobile devices. Any suggestions for fixing this issue? <div id="menu" class="py-4 d-flex justify-content-center"> <div class="row "> <div class="col-sm-auto "> ...

htmlbootstrap-4

What is the best way to add a CSS rule to JavaScript?

animation: scaleUp 0.3s linear 0.4s forwards; animation: scaleDown 0.3s linear forwards; Greetings! I'm currently working on adding animations to my content filtering functionality. Specifically, I want to incorporate the aforementioned CSS rules in ...

javascriptcsssortinganimationfiltering

The issue of PHP timing out occurring within a public function

After pulling a "large" SQL query from the database with 50,000 records and completing it in about 5 seconds, I run it through a function to create an HTML table. However, the process keeps timing out for some reason. If I limit the query to less than 30k ...

phphtmlfunction

What is the best way in jQuery to display a particular div with a unique id when a link is clicked?

I have a div with the following structure: <article id="#pippo">blablabla</article> which I have hidden using jQuery $('article').hide(); Now, I want to create a link menu that displays a specific article id when it's clicked ...

javascriptjqueryhtmlhyperlinkcss-selectors

Why is my jQuery not selecting the classes from this iframe?

I'm attempting to retrieve all classes with the name "titular_portada". There are many, but for some reason it's not functioning: <!DOCTYPE html> <html lang="es"> <head> <link rel="stylesheet" href=&q ...

htmljqueryiframe

CSS: Implementing opacity on background images within an unordered list menu items

My menu is made up of ul/li items with background images, but I'm having trouble adjusting the opacity and alignment of the images. While there are resources online for changing background image opacity, such as this article: https://scotch.io/tutoria ...

htmlcss

What is the best way to place this dropdown in a fixed position within a parent element with overflow scrolling

I am facing an issue with a dropdown menu inside a parent div. The parent div has a fixed height and is set to overflow: auto. My goal is to have the menu extend beyond the boundaries of the parent when opened, but currently it just increases the height of ...

htmlcss

Whenever I open my collapsible dropdown, it seems to leap up unexpectedly

When I interact with the collapsible card, it has a jerky animation. I would like it to open smoothly instead. The issue lies with the tooltip-cus class. If I remove position: relative;, the opening animation is smooth, but then the position of the toolti ...

htmlcssbootstrap-4

I continuously encounter "undefined" when attempting to retrieve collections

Despite my best efforts, I am unable to retrieve the data from the server using the snapshot docs. I have verified that the collection is named "creaciones" in lowercase. There is one document in the collection with existing data. I have double-checked fo ...

javascripthtmlfirebase

Unable to locate web element using Selenium in C#

Here is the HTML code I am currently using: <div class="modal-footer"> <button class="btn btn-primary" type="button" value="Show Alert" ng-click="questions.getIrMessage()" data-dismiss="modal">Confirm</button> <button class ...

javascriptc#htmlselenium

Invoke a function within an HTML element inserted using the html() method

Looking for help with a JavaScript function: function toggle_concessions(concessions) { var text = "<table>"+ "<tr><td class='concession-name'>gfhgfbfghfd</td><td class='op-encours&a ...

javascripthtmlfunctionappend

Can you tell me the specific name of the HTML document style that features two columns?

Here are two websites that showcase a unique two-column style layout: http://momentjs.com/docs/ I find these sites visually appealing and I am curious about the specific name of this style. Is there a template or tool available to create documents with a ...

javascripthtmlunderscore.jsmomentjs

Basic Search tool, displaying a <div>

Hey there, I've been searching for a solution for a while now and haven't found one yet. So here's my question: I created a simple website to display random recipes for those times when you're not sure what to make for dinner. I also w ...

javascripthtml

What is the best way to change the default info color in bootstrap 5.0 to match the info color in bootstrap 3?

Back in the days of bootstrap 3, the sweet info color was #d9edf7. Whenever you used bg-info or alert-info, that trusty old background color was #d9edf7 like clockwork. I'm on a mission to make bootstrap 5.0 behave the same way with the info color. S ...

csssassbootstrap-5

Sliding panels with Jquery

I've created some basic panels that slide in and out horizontally. My goal is to hide all content except the first panel when the page loads. When a link to other panels is clicked, the current content will slide left to be hidden and new content will ...

jqueryhtmlcssslidingpanels