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

Update the image source within a CSS element

api for enhancing images in Laravel app through preview, enlarge, and zoom functionalities

How can I vertically align a photo or image on Facebook?

Is there a way to specifically target the MUI paper component within the select style without relying on the SX props?

Retrieve a dynamic HTML object ID using jQuery within Angular

JavaScript's connection to the CSS property visibility seems to be causing some issues

Is there a way to control the text animation loop on iTyped, both starting and stopping it?

The PNG image that is stored in the MySQL database is not displaying completely on the web browser

Tips for dividing the AJAX response HTML using jQuery

Fixed bar on top, revealed only when the scroll attempts to conceal it

Disappearing CSS Box Shadows

Creating distinct identifiers for table cells utilizing the map function

Is there a way to restrict the number of words displayed in React? Check out this code snippet: `<ProductImg imgtext={products.description}/>`

Programmatically simulate a text cursor activation as if the user has physically clicked on the input

Animation of two divs stacked on top of each other

Using Jquery to set values for css properties

Unable to retrieve HTML code from a webpage using its URL address

Is there a way to escape from an iFrame but only for specific domains?

Tips for customizing MUI PaperProps using styled components

Decode my location and input the address before validating it