How do you base Element 1's position off Element 2 without affecting Element 2's position?

Question

I'm building a dashboard that has two sections. The first is a collection of dials that are centred in the page, and the second is an information and control section that shows the Users ID and lets them navigate the web app.

I would like to have the information and control section positioned to the left of the dials, but I'm not sure how to do that without pushing the dial section off centre. Is there a built in way of doing this in CSS?

This is what I would like the two sections to look like:

Below is a code snippet which is similar to what I have currently:

.both_sections {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.dashboard_section {
  background-color: rgb(226, 245, 240);
  min-width: 300px;
  height: 250px;
  border: 2px solid black;
  border-radius: 10px;
}

.information_section {
  background-color: rgb(226, 245, 240);
  min-width: 100px;
  height: 120px;
  border: 2px solid black;
  border-radius: 10px;
  margin-left: 10px;
}

How can I change the snippet so that it looks like the image above?

user_19926805 · Answer

Here is a very similar question with a useful answer to your problem: https://stackoverflow.com/a/22919484/19926805

I also would recommend creating a div (your dashboard) which is centered with the help of margin: 0 auto; and has a position: relative. Inside the div you can add your info section and add a position: absolute to it. The trick now is to pass either right, top, bottom or in your case left a value of at least 100%, then it is positioned next to the centered div.

.section {
  background-color: rgb(226, 245, 240);
  border: 2px solid black;
  border-radius: 10px;
}

.section-dashboard {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.section-info {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 110%;
}


  Info
  Dashboard

How do you base Element 1's position off Element 2 without affecting Element 2's position?

1 Answers