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

Picture: 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

The sharpness of images may diminish when they are created on an HTML5 Canvas within Next JS

I am currently working on a project where users can upload an image onto an HTML5 canvas with fixed dimensions. The uploaded image can be dragged and resized using mouse input while preserving its aspect ratio. Below is the draw function I am using to achi ...

javascriptnext.jshtml5-canvasimage-quality

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

javascriptjqueryhtmlcss

Tips for modifying a request api through a select form in a REACT application

Apologies if this question seems a bit basic, but I need some help. I am working on creating a film catalog using The Movie Database API. I have successfully developed the home and search system, but now I am struggling to implement a way to filter the fi ...

javascriptreactjs

React - Error occurred when parsing module: Unexpected Token. It is recommended to use a suitable loader to manage this file format

As a beginner in using React, I might be making obvious mistakes and I apologize for that. After researching similar bugs on various platforms like StackOverflow and GitHub, I couldn't find a solution that works for my specific issue. Here is the erro ...

javascriptreactjsbabeljsbabel-loader

Decreasing the space between columns in Bootstrap 3

My objective is: However, the current layout appears like this (the issue isn't the bottom margins, I've already decided they should be smaller): The problem lies in the gutter size which is determined by padding, as indicated by the grey area ...

htmlcsstwitter-bootstrapgutter

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Is there a way to call functions when a specific key is pressed along with the CTRL key (on a Windows system)? While testing for a particular keyCode, I used event.keyCode. I researched the codes assigned to each key and assumed that 17 + 73 would represe ...

javascriptjquery

Issue 1068: Attribute not found within angular 2 (Ahead of Time Compilation)

I am currently learning Angular 2 and trying to create a "User Register" form. However, I encountered an error stating "Property does not exist on type" during Phone number validation. I am using both JIT and AOT compilers. With the JIT compiler, my user ...

javascriptvalidationangulartypescriptangular2-aot

Is it possible to submit a select menu without using a submit button within a loop?

I'm having an issue with my code that submits a form when an option in a select box is clicked. The problem arises when I try to put it inside a loop, as it stops working. Can anyone assist me with this? Below is the code snippet causing trouble: &l ...

javascriptphphtml

Creating elegant Select Dropdown Box in AngularJS without relying on images

I am currently working on an angular page and have implemented a dropdown with ng-Options to fetch and set values successfully. However, I am now looking to enhance the appearance of this dropdown. After exploring options like ui-select, I realized that be ...

javascripthtmlcssangularjsui-select

Tips for using ng-repeat in AngularJs to filter (key, value) pairs

I am trying to achieve the following: <div ng-controller="TestCtrl"> <div ng-repeat="(k,v) in items | filter:hasSecurityId"> {{k}} {{v.pos}} </div> </div> Code snippet for AngularJs: function TestCtrl($scope) { ...

javascriptangularjsframeworksangularjs-ng-repeatangular-filters

Learn how to connect a Firebase account that was created using a phone number

✅ I have successfully implemented the feature that allows users to update their profile with a mobile number using verifyPhoneNumber and update currentUser.updatePhoneNumber ❌ However, a problem arises when a new user attempts to sign in with a phone ...

javascriptreactjsfirebasefirebase-authentication

modifying the href attribute of a tag is determined by the value of window

I'm working on a jQuery snippet that detects the current window's URL and, depending on the href value of the window, changes the href of an anchor tag. Here's what my code looks like so far: (function($) { "use strict"; $(document).re ...

javascriptjquery

Adjust the color of each list item depending on an array of strings

Within my perspective, I possess a collection of different statuses. <ul> <li>FIRST_STATUS</li> <li>SECOND_STATUS</li> <li>THIRD_STATUS</li> </ul> To continuously update the statuses in my contr ...

javascriptangularjs

What's causing my variables to be returned as null in the alerts?

Why am I receiving null values when alerting my variables? I'm attempting to pass a string stored in a variable from an external JavaScript file back to the main page using alerts. Initially, I suspected that the JavaScript was not fetching data cor ...

javascriptphpjson

Update Relative Links using JQuery or JavaScript

Currently, I am employed by a company that specializes in building websites using a specific platform. We have encountered an issue related to relative URLs within this platform. The platform exclusively utilizes relative URLs and I am looking for a way t ...

jqueryhtmlhyperlink

How to modify the content type in an Angular.js $http.delete request

When making a $http.delete request in my Angular app, I include a config object using the following approach: return $http.delete('projects/' + projectID + '/activityTypes', {data: [{id: 2}]}) This method attaches the values from my d ...

javascriptajaxangularjs

Ways to retrieve an input field value without triggering form submission

I'm currently working on a payment form where users input the amount in a text field. I also have another text field on the same form that should automatically display the amount in words based on the user input. However, I'm struggling to figure ...

javascriptphphtml

Is Postman cooperating, yet Ajax is not playing nice?

I am facing an issue while trying to make a GET request from a server that stores some account data. The request needs an Authorization header for it to work properly. I was able to retrieve the data successfully using Postman, but when I tried doing the s ...

javascriptjqueryajax

Tips on setting the ajax parameter contentType to "html"

I'm encountering an issue where the variable "myvariable" is passing as null. Can anyone provide guidance on what I might be doing incorrectly? $.ajax({ type: "POST", url: "/MyController/MyAction", data: JSON.stringify({ items: my ...

jqueryhtmlajax

Why does the diamond symbol appear distorted on my iPhone screen?

My website is similar to SO where moderators have a diamond sign at the end of their name. However, I am facing an issue on my iPhone where the diamond sign looks red and distorted (on Chrome it appears normal). As you can see in the image above, the diam ...

htmlcssiphone