How to make a div inside body of html away from other two divs

Question

I wonder how can I set a div inside html body away with certain values whatever the width of the html body. Like below illustration :

There are two sidebars at each side. i want to create a div between them, respecting that the distance from sidebar 1 is 50px and the other is 20px . i want to keep this distance if the width of the html body always changing.

in other meaning .. I want to make this in-between div is always away from the other two sidebar, for example if the body width is 1000px so the width of the in-between div increase to match 50/20px distance, and if the width of the body become 500px, the div width decrease to respect the 50/20px

UPDATE 1

After i tried the solution provided by Mr.Roberto Zvjerković

for the parent div i applied the below :

.Existed-ne-data-div-main {
  position: absolute;
  display: flex;
  background-color: #0069D9;
  height: 100%;
  width: 100%;
  overflow-x: auto;
  align-items: center;
}

in-between div :

.Existed-ne-data-div {
  position: absolute;
  display: block;
  width: 100%;
  height: 60px;
  background-color: rgb(220, 228, 220);
  min-width: 150px;
  box-shadow: 0px 0px 9px rgb(2,3,3);
  border-radius: 5px;
  margin-left: 140px;
  margin-right: 180px;

  }

The Result :

so from left side it works, but right side is not.

UPDATE2

After removing position in child. solution is worked.

Does this answer your question? [How to horizontally center an element](https://stackoverflow.com/questions/114543/how-to-horizontally-center-an-element) — Beller, Mar 08 '21 at 09:25
No i do not want to center it, i want to make this in-between div is always away from the other two sidebar, for example if the body width is 1000px so the width of the in-between div increase to match 50/20px distance, and if the width become 500px, the div width decrease to respect the 50/20px — Leivir, Mar 08 '21 at 09:29
width 100%, margin-left 50px and margin-right 20px on the div and display flex on divs parent — Roberto Zvjerković, Mar 08 '21 at 09:38
@Roberto Zvjerković, Hi Mr Roberto Zvjerković. i applied your answer. Can you please check the updated question. — Leivir, Mar 08 '21 at 09:52

score 0 · Answer 1 · answered Mar 08 '21 at 09:32

You can set display:flex; justify-content:space-between; alig-items:center; for body tag.Then you set body height height:100vh. Set width of your sidebars as you want to and width of div in the center of your page. After that adjust your padding of 50px and 20px to your div in the middle using padding-left ; padding-right . This idea using flexbox should work. Here is good source for learning flexbox which is essential for css https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

score 0 · Answer 2 · answered Mar 08 '21 at 09:58

0

You can make for div: margin: 0 20px 0 50px; or margin for sidebars. Please, provide full html code.

answered Mar 08 '21 at 09:58

Igor Zubenko

51
3

How to make a div inside body of html away from other two divs

2 Answers2