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

The functionality of `config.assets.debug = true` fails to

I've encountered an issue with the configuration on development where config.assets.debug = true doesn't seem to work correctly. Instead of having multiple separate JavaScript and CSS file inclusions, I'm getting a consolidated one: <li ...

Why does the div inside the tbody element get automatically shifted outside of the tbody during rendering?

Below is a snippet of my code: <body> <table> <tbody> <div>test</div> </tbody> </table> </body> Upon executing the code mentioned above, it transformed automatically in ...

What is the best way to call a JavaScript function with multiple arguments from a Silverlight project?

I encountered an issue when trying to invoke a JavaScript function with multiple arguments from an HTML page. Here is what I am attempting to do: wbNavigator.Navigate(new Uri("http://localhost:56433/route.html", UriKind.Absolute)); object results = wbNavi ...

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

I am trying to customize the Geocoder text box in the ArcGIS JavaScript API by overriding the default search result. Although I have written some code for this purpose, I am not satisfied with the results. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

Is there a way to include a minimize button on a MaterialUi Table enclosed in a Paper component for easy table reduction?

I am trying to add a minimize button to either minimize my MaterialUi Table or the Paper component that wraps it. Here is the code I have so far: <TableContainer component={Paper} style={{maxHeight:'inherit', maxWidth:'inherit', boxS ...

Provide a spider with unadulterated HTML rather than setting off AJAX requests

While my website is being crawled, which PHP function should I utilize to ensure that even if ajax isn't activated, my content still gets transmitted? PHP doesn't have the ability to determine if ajax is supported. Objective: Provide the crawle ...

Encasing words within a cell of a table

My goal is to ensure that the table width remains fixed and unaffected by long text strings. Even though I have PHP code in place to limit characters at 100 per cell, I want to guarantee that a lengthy text string will never expand the table beyond its set ...

While it includes a new section, it fails to refresh the navbar

Upon clicking the button to add a new section, the section gets added successfully. However, the navbar does not get updated as expected. It should dynamically update the navbar to display both the existing sections and the new section added using JavaScri ...

My Drop Down menu is not displaying the <a> in two lines, and I'm having trouble getting it to show correctly

Hello there! I've encountered an issue with my drop-down menu. The text within the <a> tags is too long to fit on a single line, and I'm struggling to make it display in two lines instead. I've been experimenting for the past couple o ...

Displaying complex JSON data in an HTML format using JavaScript

How can I convert the second array of entities into an HTML format from the JSON data using a for loop or similar method? To access the necessary data, I currently use console.log(data.response[0].entities.urls); $(document).ready(function () { $.getJSO ...

Setting the CSS property `overflow-y: scroll;` does not make the element scrollable and causes it to exceed 100% of the block

I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height. The issue arise ...

PHP is functioning properly, but no content is being displayed

I recently delved into coding and had to tackle a form that sends data through email using PHP. While the functionality of my form is working perfectly and I'm able to receive emails, I encountered an issue where the PHP page appears blank. Despite tr ...

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

I'm currently attempting to dynamically add HTML elements using JavaScript with a directive: document.getElementsByClassName("day-grid")[0].innerHTML = "<div ng-uc-day-event></div>"; or var ele = document.createElement("div"); ele.setAttr ...

The base64 code generated by the toDataURL method on the canvas appears to be incorrect

I am facing an issue with my code while using canvas to draw a cropped image with base 64. The problem is that it works perfectly on Chrome but gives me a blank image on Firefox. async function base64SquareCrop(imgbase64, size = 224) { const img = docume ...

The functionality of Flatbutton(Input handler) appears to be malfunctioning

I am having trouble with the file uploader from Material-UI. It doesn't seem to be working properly when I try to select a file. Does anyone have any suggestions on how to handle the input from the file selector? <FlatButton icon={< ...

The scrolling feature in IE 7 with IE 7 standard does not respond to the jquery scroll event, whereas it functions properly in IE8 and IE

I have included an example below which consists of a terms div that contains some terms and conditions as its content. The checkbox is enabled when the user scrolls to the bottom of the div. However, this functionality seems to be not working properly in I ...

Navigating within Vue.js: Utilizing vue-router for seamlessly redirecting to targeted sections within a view identified by an ID

I am in the process of using a Home view and a Blog view. My goal is to utilize a <router-link> to transition from the Home view to a particular section within the Blog view. The specific section I am referencing appears as follows: <section id=&q ...

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

Unable to implement a design on a button during its click event

I successfully implemented a dynamic button in HTML5 and Javascript. The button has a click event assigned to it, so when clicked, its content and background color are supposed to change. However, while the content changes correctly, the background color d ...