What about nested elements with percentages, set positions, and fixed placements?

Picture: https://i.sstatic.net/KFNR1.png I am working on a design with a yellow container div that I want to keep at 50% width of the window. Inside this container is a purple image div that stretches to 100% of the parent container's width, and there is a pink sticky label positioned on top of the image div (positioned absolutely so it can be offset relative to the image). I want to keep this entire half of the screen in fixed positioning so it stays sticky as I scroll.

There is also a title under the image that needs to be visible regardless of vertical window resizing. In this case, the image div should shrink vertically if necessary to ensure the title remains visible.

In essence, I aim to have the image div always be 100% width of the parent container div, with the ability for the image div to shrink vertically based on a max percentage height. Alternatively, I would like to maintain a fixed aspect ratio (3:4 or similar) when the image shrinks vertically.

I am trying to avoid using fixed pixels or ems in my CSS overall since the website needs to stretch fluidly vertically to accommodate the title under the image.

The HTML structure looks something like:

<wrapper>
    <left-column>
        <normal text and scrollable content>
    <right-column-yellow>
        <image with sticky pink label>
        <purple image div>
        <image title>

Apologies if this seems confusing; my brain is quite fried! Can anyone please assist me with this?

javascripthtmlcssfrontend

Answer №1

If you want to split your left and right panel, consider using position fixed.

Based on your description, this should be the solution.

<div class="wrapper">
  <div class="left">
   <p><!--Insert lengthy text here--></p>
  </div>
  <div class="right">
    <div class="image">
    <div class="label">Label</div>
    <div class="title">Title</div>
  </div>
</div>

Here is some CSS styling:

.left,.right{
    position: fixed;
    width: 50%;
    height: 100%;
    display: inline-block;
  }

  .left{
    left:0;
    top: 0;
    overflow: auto;
  }

  .right{
    right: 0;
    top:0;
    background-color: yellow;
  }

  .right .image{
    position: relative;
    width: 100%;
    height: 50%;
    top: 50%;
    left: 0;
    background-color: #fff;
    transform: translateY(-50%);
  }

  .right .image .label{
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    text-align: center;
    width: 200px;
    background-color: pink;
    margin: auto;
  }

  .right .image .title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    text-align: center;
    width: 200px;
    background-color: #000;
    margin: auto;
    color: white;
    font-size: 30px;
  }

For a working example, check out my codepen: https://codepen.io/masonwongcs/pen/WMJGZb

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

Dynamic Vue2 input field names

With Vue2, I am attempting to create input tags with dynamic content. My attempts at binding it to a function using :name="someFunction" have been unsuccessful in this case. The name attribute needs to be in the format people[0]['name'] people ...

javascriptdynamicvue.jsvuejs2

The problem I am facing is with the React Ant d Modal Component, where I am unable to render the

Hey there! I'm currently working with React Js and the 'Ant design Modal Component'. When I click on a button, the modal should open and display the content of each user with their unique ID. However, I'm facing an issue where all modal ...

javascriptreactjsantdant-design-pro

Unlock the power of Redux: Crafting specialized selectors with parameters

I am currently working with a state that contains a map array of data. I find myself needing to select a single object from this array. To achieve this, I can retrieve the entire array in my component using: function mapStateToProps (state) { return { ...

javascriptreactjsreduxreact-reduxredux-thunk

We encountered an issue loading the resource: the server has returned a 404 (Not Found) error message and a 403 Forbidden error message. However, the resource functions properly on Codepen and localhost

I have a CodePen demo that works fine. However, when I upload it to the server, it stops working properly and most external references show 404 errors. Initially, there were no problems, but now it seems to be an issue like this: !--> http://sachin.ipov ...

htmlcss

Ensure that JSON requests are written in English when using FullCalendar

I am currently working on implementing a multi-language application using FullCalendar. My goal is to have the calendar display in multiple languages while keeping the JSON request always in English. However, when I switch languages, the JSON request also ...

javascriptjqueryjsonfullcalendar

Assistance needed with CSS floating properties

Despite seeing many inquiries about float, I still can't pinpoint what's causing my issue. My objective is simple: GREETINGS FRIEND I aim for it to align just to the left of the unordered list. Referencing this solution, I attempted adding cl ...

htmlcsscss-float

Limit the Datepicker in MUI (v5) to only accept two-digit years

I am currently using the MUI (v5) Datepicker for capturing user birthday information. The Datepicker has been localized to German language, resulting in the input format DD.MM.YYYY. However, many German users prefer using a shorter year format like DD.MM. ...

javascriptmaterial-uidate-fns

Angular: Excessive mat-menu items causing overflow beyond the page's boundaries

Within my mat-menu, there is a div for each mat-menu item. The number of items varies depending on the data retrieved. However, I noticed that when there are more items than can fit in the menu, it extends beyond the boundaries of the mat-menu instead of ...

cssangularangular-material

Tips for incorporating a responsive width feature into the Drawer component in MUI v5

I'm currently working with Material UI v5 and facing a challenge in creating a responsive drawer. I want the drawer to occupy 100% of the screen width on smaller devices, while taking up only 1/3 of the screen width on larger devices. Unfortunately, I ...

cssreactjsmaterial-ui

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Error encountered: EPERM when attempting to rename a directory in Node.js unexpectedly

There is a requirement for me to remove the Backup folder, rename the processor as Backup, create a Processor folder again, and send a response to the user. The code I am using for this task is as follows: fsExtra.remove('app/Backup', function(e ...

javascriptnode.jsexpressfs

Ways to modify React icons upon clicking them?

Dealing with some icons from react-icons that seem to be causing trouble. Whenever I try to change an icon from outline to filled upon clicking, all the icons end up changing together. It's not functioning as expected. Take a look at my code snippet ...

javascriptreactjsnext.jstailwind-cssreact-icons

The attempt to save data failed with a timed out error for Operation `todos.insertOne()` after 10000ms of buffering

const express=require("express"); const { stringify } = require("querystring"); const router= express.Router() const Db=require("../models/Db") router.get("/",(req,res)=>{ res.render("index.hbs"); }) .post("/addData",async(req,res)=>{ const ...

javascriptnode.jsmongodbexpressruntime-error

Morris.js tutorial: Enhancing bar charts with data labels

I have this: https://i.sstatic.net/GXjur.png But I want this instead: https://i.sstatic.net/spcS2.png Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

Automatic Full-Screen Switching Upon Video Playback in HTML5

Currently, I have a video clip set to play when the timer reaches a certain point. My goal is for the video to automatically enter full-screen mode when it starts playing and return to its original position when it stops, as the timer will continue ticking ...

javascriptjqueryhtmlcssvideo

When the state inspection fails due to a missing object property, the function will not work as intended

I'm currently in the process of developing a weather app. The user will input either a zip code or a city name + state, triggering the $.getJSON function to gather data. One key feature I am working on involves checking if the user's input is va ...

javascriptjqueryobjectif-statementgetjson

What causes one CSS file's properties to be inherited by another CSS file in a React application?

I'm puzzled as to why my hero section file seems to be adopting the styling from the navbar CSS file. I do understand that the index.css file sets properties for the entire app, but in my case, I have separate CSS files for different components instea ...

javascripthtmlcssreactjs

Creating a curved upper margin in the footer with Bootstrap: techniques and tips

I'm currently trying to create a footer with rounded corners at the top left and right. I've been using inline styles to test it out, but I can't seem to get it looking right. I'm working with Bootstrap 5 and applying custom inline styl ...

htmlbootstrap-5footer

Reorganize containers without relying on bootstrap styling

Is there a method to rearrange the order of two divs without using the bootstrap library? <div class='parent'> <div class='child-1'>Abc..</div> <div class='child-2'>Xyz..</div> </div> I ...

jqueryhtmlcssflexbox

I'm looking for a way to add an onclick event to every element created by Vue.js through a "v-for" loop in order to toggle the visibility of its inner content

My Vue data consists of: data: function() { return { results: { "items": [ { "id": "770c257b-7ded-437c-99b5-3b8953b5be3a", "name": "Gsbssbb", "price": 9559, "colour": { ...

javascripthtmlloopsvue.jsvuejs2