Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? 

<div class="left-img"> IMAGE HERE </div>  <!-- fixed positioned -->
<div class="container"> Lorem ipsum... </div>
<div class="right-img"> IMAGE HERE </div> <!-- fixed positioned -->

Check out this example. Currently, I have set:

top: 50%;

To vertically center them. However, when the window is resized horizontally, the fixed elements should remain aligned with their sibling, the container. How can I achieve this using jQuery or CSS?

I was thinking of something like this 

$(window).resize(function() {
  $('img').css("right", /*size here*/);

  $('.right-side-img');
})

But I'm unsure about determining the window size. Since I am using Bootstrap and all my content is within the container, I want to position an image in the middle on each side while keeping it outside the container.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

To achieve this, you can set a specific width for the left and right absolutely positioned elements and use appropriate values for the left/right properties.

Check out the example here.

.left-img,
.right-img{
    position: fixed;
    background: blue;
    top: 50%;   /*    <------ 15% ----->   */
    width: 12%; /* =  ((100% - 70%) / 2) - 3%
                         |      |     |    |
    width of the body  ---      |     |    --- needed gap for left/right (*)
    width of the container  -----     ----- get remaining width for each side */
}

.left-img { left: 3%; } /* (*) The gap between edges of the page and elements */
.right-img{ right: 3%; }

If you want to have different widths for the elements, you can utilize the CSS3 calc() function to calculate the necessary values for the left and right properties based on the width of each fixed positioned element.

See an example with different widths here

.left-img {
    width: 150px;
    left: calc(15% - 150px);
}

.right-img{
    width: 100px;
    right: calc(15% - 100px);
}

It's important to mention that calc() is compatible with IE9+.

Here is the previous answer, which may have been misinterpreted

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

Errors can arise in Discord.js when encountering "undefined" before the first array object in an embed

I am currently in the process of creating a Discord bot command that allows users to construct their own city. I am encountering an issue with a list command that is supposed to display all the roads and places built within the city. However, each list kee ...

javascriptnode.jsarraysjsondiscord.js

Exploring the process of transferring a jQuery array from a Rails controller to a PostgreSQL array column

For my project, I successfully pass a JavaScript array to a Rails controller using AJAX. The JavaScript array consists of upload image names. Within my postgresql database, there is an array column called "images." In the Rails controller, I attempted the ...

javascriptjqueryruby-on-railsarrayspostgresql

Align pictures in the middle of two divisions within a segment

This is the current code: HTML: <section class="sponsorSection"> <div class="sponsorImageRow"> <div class="sponsorImageColumn"> <img src="img/kvadrat_logo.png" class="sponsorpicture1"/> </div& ...

javascripthtmlcss

How can I ensure a div expands over another element when hovering the mouse?

I have a development div in the footer with a hover effect that expands it. However, it is currently growing underneath the top element on the site. I want it to expand on top or push the element above. Website: I've tried using position, float, and ...

htmlcss

Is there a way to incorporate a variable into a JSON URL?

I'm attempting to incorporate a variable I have defined into the JSON URL: var articleName = "test"; $.getJSON( "https://www.googleapis.com/customsearch/v1?key=API_MY&cx=CX_MY&q='+articleName+'&searchType=image&fileType= ...

javascriptjqueryjson

Choosing an element from a multiple group listbox with jQuery

Is there a way to select items in the listbox using jQuery when dealing with optgroup elements? $('#id option[value=<?php echo $row; ?>]').attr('selected','selected'); The above code works for regular options, but how ...

javascriptphpjquery

What is the process for implementing hover transitions on link elements?

I am trying to incorporate a transition effect for my links. Essentially, I want the text-decoration (which is currently set to underlink) to gradually appear. Unfortunately, my previous attempt at achieving this has been unsuccessful: #slink{ transit ...

htmlcss

The ReactCSSTransitionGroup does not insert any additional classes

I have been attempting to incorporate animation into each list item within a list of articles that I am loading through an ajax request. Despite my efforts, the ReactCSSTransitionGroup element does not seem to be functioning as expected on the targeted ite ...

javascriptreactjs

Is there a way to UPDATE a div without having to RELOAD the entire page in it?

SOLVED -SORT OF--- After much frustration, I finally found a solution to my problem. By adding window.location.reload(); in my code where the submit button is, I was able to close the div successfully. // Collapse Panel on submit $("div#panel").on(' ...

phpjqueryhtmlrefresh

Why does NPM not install the most recent version of the package during an update?

After installing nodemon using the command 'npm i nodemon', I always get the latest version, which is currently 2.0.2. However, if I decide to install an older version using another command, such as npm i someolderemail, and then try to update ...

javascriptnode.jsnpm

Displaying a div after a successful form submission using Jquery

I created two popup windows. One is used to ask the user whether they want to submit the form, and if they click 'yes', the form is submitted. The issue I encountered is that the other popup window should be shown after the form is successfully s ...

javascriptjqueryhtmlformssubmit

Steps for creating a square button

Is it possible to create a square button on my website that still functions like a traditional button? I want the button to change appearance slightly when scrolled over. Currently, I have an example where the button is not clickable: http://jsfiddle.net ...

css

How to handle a Node.js promise that times out if execution is not finished within a specified timeframe

return await new Promise(function (resolve, reject) { //some work goes here resolve(true) }); Using Delayed Timeout return await new Promise(function (resolve, reject) { //some work goes here setTimeout(function() { resolve(true); }, 5000); } ...

javascriptnode.jstypescriptpromise

Align your content perfectly on a full-screen slick slider

Attempting to center content over a full-screen slick slider from kenwheeler.github.io/slick/, I used a flexbox but the content remains at the edge of the viewport. It seems like an issue with the position tag in the slick CSS, but I can't figure out ...

htmlcsscenterslick.js

The image from the SQL database fails to show up in the detailsView ImageField when using the jQuery lightbox, as well as the asp:Image control

Upon clicking the image displayed in the detailsView ImageField, the jquery lightbox pops up but fails to show the picture. Instead, it displays a red x in the middle of the lightbox. The same issue arises with the asp:Image control within the provided c ...

asp.netjquerysqllightboximagefield

Running Javascript code after rendering a HandleBars template in Node/Express

I have a Node.js application where I am trying to load data into a jQuery datatable after the data has been fetched. Currently, I am able to populate the table with the data, but I am facing issues initializing the datatable. Here is how I render the temp ...

javascriptnode.jsexpressmean-stackexpress-handlebars

Discovering latitude and longitude coordinates from a map URL, then enhancing dynamism by utilizing the coordinates as parameters

Hello, I am currently learning Vue.js and have encountered a challenge with embedding Google Maps URLs. Despite my extensive research on Google, I have not been able to find the solution I need. Here is an example of the URL I am working with: "https: ...

javascriptvue.jsgoogle-mapsurl

Executing functions in TypeScript

I am facing an issue while trying to call a function through the click event in my template. The error message I receive is "get is not a function". Can someone help me identify where the problem lies? This is my template: <button class="btn btn-prima ...

htmlangularjstypescriptangulartypescript1.8

Unable to retrieve elements from an array outside of a function

I am attempting to combine the name with the path of all the files from a specific directory and hash them. Once hashed, I am storing the hash in an array called `hash_orig`. Below is what I have implemented. var fs = require('fs'); var Hashes = ...

javascriptarraysnode.jshash

Including an embedded iframe in an asp.net web form

I need to integrate an iframe into a web form by retrieving the URL from an API call to a third-party payment service. I am working with ASP.NET 4.5 and C# 6.0. The code for my web form includes implementing an iframe similar to that in an ASP.NET MVC cod ...

c#htmlasp.netiframewebforms