CSS-only method for creating a fixed position sidebar with adjustable width

Question

CSS-only method for creating a fixed position sidebar with adjustable width

https://i.stack.imgur.com/e4Gsv.png

I have a vision of creating something similar to the image above solely using CSS. The design must incorporate the following elements:

The image-container will hold a 3x4 aspect ratio image, filling the available height of the viewport. As a result, the width of image-container will vary based on the viewport height.
The image-container should remain fixed in place as the user scrolls through the window.
The content-container needs to be scrollable.
The content-container should occupy all the space between the right edge of image-container and the right edge of the viewport.

In previous instances, I might have achieved this effect using jQuery:

// style.css
.image-container {
   position:fixed;
   top: 0px;
   left:0px;
   bottom: 0px;
}

.image-container img {
   height: 100%;
}

// script.js
$(window).load(function() {
   var width = $('.image-container').width();
   $('.content-container').css({'margin-left': width});
});

Is there a way to achieve this design using only CSS? Perhaps leveraging flexbox?

html css flexbox

Answer 1

Answer №1

styling solution

implement flexbox

html,
body {
  height: 100%;
  overflow: hidden;
}
html {
  background-color: #000;
}
.body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #999;
}
.container-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.image-container {
  background-size: contain;
  text-align: center;
  height: 100%;
}
.image-container img {
  height: 100%;
  width: auto;
}
.content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-inner-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 20px 40px 20px;
}

<div class="body">
  <div class="container-wrapper">
  <div class="image-container">
      <img src="http://placehold.it/750x1334">
    </div>
    <div class="content-container">
      <div class="content-inner-container">
        <p>
    Unique content will be displayed here after applying the CSS styling rules.
    </p>
     <p>
    Additional unique content can also be included in this section to enhance the design and layout.
    </p>
    <p>
    The use of Lorem Ipsum text is common as a placeholder until real content is provided for webpage development.
    </p>
      </div>
    </div>
  </div>
</div>

scripting solution

$(document).ready(function(){
var width = $('.image-container').width();
   $('.content-container').css({'width': 'calc(100% - '+width+')'});
});

html,
body {
  height: 100%;
  overflow: hidden;
}
html {
  background-color: #000;
}
.body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #999;
}
.container-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.image-container {
  background-size: contain;
  text-align: center;
  height: 100%;
}
.image-container img {
  height: 100%;
  width: auto;
}
.content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-inner-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 20px 40px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="body">
  <div class="container-wrapper">
  <div class="image-container">
      <img src="https://dummyimage.com/480x640/6b676b/fff">
    </div>
    <div class="content-container">
      <div class="content-inner-container">
        <p>
    Implementation of JavaScript code allows for dynamic adjustments based on the image container's width.
    </p>
     <p>
    This section can feature interactive elements or modify content dynamically based on user interactions.
    </p>
    <p>
    Utilizing jQuery for scripting enhances the website's interactivity and performance.
    </p>
      </div>
    </div>
  </div>
</div>

Answer 2

styling solution

implement flexbox

html,
body {
  height: 100%;
  overflow: hidden;
}
html {
  background-color: #000;
}
.body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #999;
}
.container-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.image-container {
  background-size: contain;
  text-align: center;
  height: 100%;
}
.image-container img {
  height: 100%;
  width: auto;
}
.content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-inner-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 20px 40px 20px;
}

<div class="body">
  <div class="container-wrapper">
  <div class="image-container">
      <img src="http://placehold.it/750x1334">
    </div>
    <div class="content-container">
      <div class="content-inner-container">
        <p>
    Unique content will be displayed here after applying the CSS styling rules.
    </p>
     <p>
    Additional unique content can also be included in this section to enhance the design and layout.
    </p>
    <p>
    The use of Lorem Ipsum text is common as a placeholder until real content is provided for webpage development.
    </p>
      </div>
    </div>
  </div>
</div>

scripting solution

$(document).ready(function(){
var width = $('.image-container').width();
   $('.content-container').css({'width': 'calc(100% - '+width+')'});
});

html,
body {
  height: 100%;
  overflow: hidden;
}
html {
  background-color: #000;
}
.body {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #999;
}
.container-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}
.image-container {
  background-size: contain;
  text-align: center;
  height: 100%;
}
.image-container img {
  height: 100%;
  width: auto;
}
.content-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.content-inner-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px 20px 40px 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="body">
  <div class="container-wrapper">
  <div class="image-container">
      <img src="https://dummyimage.com/480x640/6b676b/fff">
    </div>
    <div class="content-container">
      <div class="content-inner-container">
        <p>
    Implementation of JavaScript code allows for dynamic adjustments based on the image container's width.
    </p>
     <p>
    This section can feature interactive elements or modify content dynamically based on user interactions.
    </p>
    <p>
    Utilizing jQuery for scripting enhances the website's interactivity and performance.
    </p>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

I have successfully achieved what you're trying to do. Take a look at this fiddle.

.image-container{
  height:100vh;
  width:100vh - 25%;
  border:2px solid red;
  display:inline-block;
  margin:0;
  position:fixed;
}

.content-container{
 border:2px solid green;
 margin-left: 100vh - 25%;
 display:inline-block;
 width:100%;
 height:2000px;
}

<div class="image-container"></div>

<div class="content-container">
  <p>I aim to create something similar to the image above, 
using only CSS. It should include the following features. </p>
</div>

Answer 4

I have successfully achieved what you're trying to do. Take a look at this fiddle.

.image-container{
  height:100vh;
  width:100vh - 25%;
  border:2px solid red;
  display:inline-block;
  margin:0;
  position:fixed;
}

.content-container{
 border:2px solid green;
 margin-left: 100vh - 25%;
 display:inline-block;
 width:100%;
 height:2000px;
}

<div class="image-container"></div>

<div class="content-container">
  <p>I aim to create something similar to the image above, 
using only CSS. It should include the following features. </p>
</div>

CSS-only method for creating a fixed position sidebar with adjustable width

Answer №1

Answer №2

Similar questions

Implementing dual backgrounds in CSS

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

How can a JavaScript function be used to check a tag's status?

Concealing a block from top to bottom

Why is there a mismatch between CSS and Angular 6 selector components?

Looking for a way to make one image disappear briefly while transitioning to another image in Javascript

Tips for removing red borders on required elements or disabling HTML validation

How to keep text always locked to the front layer in fabric.js without constantly bringing it to the front

Using React Refs to Trigger the video.play() Method - A Step-by-Step Guide

The Server-Sent Event feature seems to be malfunctioning as it appears that browsers are unable to detect any events sent through Server-Sent

How can you efficiently update another ng-model value based on a select input in AngularJS using ng-change?

Alter the Color of the 'div' According to the Background

What steps can be taken to create a curved bottom for the header section?

The design problem arises from using jQuery to dynamically prepare the table body at runtime

Angular service provided by MetronicApp

Stack Divs Without Using Absolute Positioning

AngularJS: ng-show causing flickering issue upon page refresh

Effortlessly lower several elements simultaneously with SlideDown

Is there a way for me to retrieve the value from an input, round it up to the nearest even number, and assign it to a new variable?

What is the best way to adjust the scroll speed within a specific element using React?