Ensuring one div remains in a fixed position relative to another div

I'm struggling to keep my two white divs aligned in relation to the black div in the center. They need to maintain the same distance from the black div even when the page is resized.

#halvfjerds {
  width: 100%;
  height: 1050px;
  background-color: blue;
}

#halvfjerds .timeline {
  background-color: black;
}

#halvfjerds .linje1 {
  width: 500px;
  height: 100px;
  background-color: white;
  margin-left: 18vw;
  margin-top: 220px;
  float: left;
  display: block;
  position: absolute;
}

#halvfjerds .linje2 {
  width: 500px;
  height: 100px;
  background-color: white;
  margin-left: 54vw;
  margin-top: 780px;
  float: left;
  display: block;
  position: absolute;
}

.timeline {
  height: 95%;
  width: 100%;
  float: left;
  margin-top: 1.4%
}
<div id="halvfjerds">
  <div class="timeline">
  </div>
  <div class="linje1">
  </div>
  <div class="linje2">
  </div>
</div>

Any help would be greatly appreciated!

Answer №1

#seventy .timeline {
background-color:black;
position: relative;
}

If this isn't what you're looking for, please feel free to inform me.

Answer №2

Ensure you adjust the margin-left to be exactly 18vw.

If this solution doesn't work for you, please let me know as I might have misunderstood your requirements.

Answer №3

To make it work, simply assign the position:absolute style property to your div elements.

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

Discrepancy in div height between Chrome/Edge and Firefox browsers

I am currently in the process of designing a straightforward website layout that includes a navigation bar at the top. The main focus is on an image that needs to stretch from the bottom of the navbar to the bottom of the window, filling up the entire scre ...

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

Using JQuery and PHP to make an Ajax request and handle JSON response

I'm attempting to complete a straightforward exercise: The task involves entering two numbers in separate inputs, clicking a button, and seeing the result appear in a third input. sum.html: <html> <head> <title>Sum</tit ...

Hidden input fields do not get populated by Angular submit prior to submission

I am in the process of implementing a login feature in Angular that supports multiple providers. However, I have encountered an issue with submitting the form as the loginProvider value is not being sent to the server. Below is the structure of my form: &l ...

photos arranged in rows rather than a single row

Looking for help with arranging the remaining photos in the second row? Check out this example image link. I'm struggling to organize a row of overflow images within the "small-img-row" division. This row is located under the main image in col-2. H ...

Using jQuery to toggle the image of a button based on its id

I have a jQuery function that opens another section when clicking on a div with the class 'open', and changes the image of a button by switching its id for CSS. However, I now need to change the button's image back when it is clicked again. ...

Issue with Angular 6: Jquery unable to detect element when using *ngIf directive

I'm currently developing an app using Angular 6, and I am facing an issue while trying to add a class using the jquery hover() method. In my navigation menu, I have 5 links, and although they all appear the same, 2 of them have an added *ngIf directiv ...

What is the best way to obtain the id of an HTML element that is generated within jQuery code?

Typically, data is retrieved in HTML by storing the html in the html file. In my case, however, I create the html element inside jQuery. So, how do I call out the div id? How can I replace document.getElementByID ("edit").innerHTML=.... when the element i ...

Obtaining a single element from a hidden display while dragging using Jquery UI

Is there a way to move an element outside of a container with overflow hidden when using drag and drop functionality in CSS? Currently, when I drag an element with the "item" class, it stays within the confines of the container with overflow set to hidden. ...

Display a PHP warning message when attempting to add methods to ajax jQuery

Recently, I have delved into the world of ajax and jQuery while working on my final year project. However, I have encountered a problem when adding methods to my JavaScript code. Here is an excerpt from my ajax script: $(document).ready(function() { $ ...

Trouble with Setting a Background Image in Ionic with Javascript and Angular

I'm having trouble getting my background image to display in this Ionic project using CSS. It works when I embed it directly into the HTML, but that's not an ideal solution. I vaguely recall something about using base64 for images, but I'm n ...

Challenges with adjusting the dimensions of varying-sized fluid squares that are floated

I've been facing a roadblock in my coding project since yesterday afternoon. I'm trying to transform a classic unordered list menu into a tiled "gallery" within a 12 column grid, with fluid square tiles. When the squares are floated, the first s ...

What steps are involved in creating a circular shape on canvas?

I am trying to create a circular shape in the canvas using the code below. The code involves moving an object with keyboard keys, and I need help making the canvas shape into a circle without affecting the functionality of the code. I attempted to modify t ...

Customizing Your WordPress Menu with HTML5 Features

Can someone assist me in creating a customized WordPress menu? I am facing issues with unnecessary classes added by WordPress and the lack of certain attributes on dropdowns. Below is the HTML code: <nav class="navbar navbar-default navbar-static- ...

Uploading a File to a Remote WCF Service via jQuery AJAX on Different Domains

I am currently facing some difficulties in achieving the following task and would really appreciate any guidance you can provide. My goal is to upload a file from my HTML5 site to a cross domain WCF service hosted in IIS 7.5. Additionally, I need to send ...

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

Server blocking access to Javascript files

Having some trouble with my code, it works fine on Localhost but not on Fasthosts server. Seems to be an access issue to a folder on the server, here are the debug messages: GET (http://reggarockaboogie.co.uk/images/gallery/fld01/) 403 (Forbidden) k.cors ...

Generating an app without using the Jade template engine with Express

Interested in creating an express skeleton using the express generator method. Here are the steps: $ npm install express-generator -g But it tends to add a lot of automatic jade files, which can be overwhelming. Is there a way to eliminate those jade fi ...

Button for Selecting Colors

I love the color picker button on Google Keep, where a variety of colors pop up for selection. I'd like to add something similar to my website. What steps should I take to implement this feature? ...

What is the best way to incorporate external HTML content while ensuring HTML5 compatibility? Exploring the different approaches of using PHP, HTML

While this may seem like a simple task to the experts out there, I have been struggling for over an hour without success... My objective is to use a single footer file and menu file for all my webpages while considering blocking, speed, and other factors. ...