Question 177730 in Html Question posted in
Some basic documentation can be found here.

How to vertically translate an element between two others in HTML?

Given a header element and a main content element, I want to add a bar between these two ( vertically ) so this

#header {
  background: yellow;
  height: 50px;
}

#bar {
  background: green;
  height: 50px;
}

#main-content {
  background: blue;
  height: 50px;
}
<div id="header">header</div>
<div id="bar">bar</div>
<div id="main-content">main content</div>

should become this ( I removed some horizontal space from the green block for the sake of simplicity )

enter image description here

I tried the following

#header {
  background: yellow;
  height: 50px;
}

#bar-container {
  position: relative;
  background: green;
  height: 50px;
  margin: 0 50px;
}

#bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#main-content {
  background: blue;
  height: 50px;
}
<div id="header">header</div>
<div id="bar-container">
  <div id="bar">bar</div>
</div>
<div id="main-content">main-content</div>

which is wrong. How can I tell the main content to move up so the bar is between the header and the main content?

Tags:

2

Answers


  1. 0

    Give the bar container a height equal to 0 and center its content

    #header {
  background: yellow;
  height: 50px;
  padding: 30px 0;
}

#bar-container {
  height: 0; /* 0 height */
  /* center vertically */
  display: flex;
  align-items: center;
  /**/
}

#bar {
  height: 50px;
  width: 80%; 
  margin-inline: auto; /* center horizontally */
  background: green;
}

#main-content {
  background: blue;
  height: 50px;
  padding: 30px 0;
}
    <div id="header">header</div>
<div id="bar-container">
  <div id="bar">bar</div>
</div>
<div id="main-content">main-content</div>
    Login or Signup to reply.
  2. 0

    Two other approaches with grid:

    option1:

    div {
  min-height: 50px; /*all divs at least 50px*/
}

#header {
  background: yellow;
  grid-area: 1 / 1; /*overlap header and bar*/
}

#bar {
  background: green;
  grid-area: 1 / 1; /*overlap header and bar*/
  margin: 0 4rem; /*margin to bring in sides of bar*/
  transform: translateY(50%); /*translate on the Y axis*/
}

#main-content {
  background: blue;
}

body {
  display: grid; /*use grid on parent*/
  grid-template-rows: min-content 1fr; /*2 grid rows*/
  
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}
    <div id="header">header</div>
<div id="bar">bar</div>
<div id="main-content">main content</div>

    option 2:

    div {
  min-height: 50px; /*all divs at least 50px*/
}

#header {
  background: yellow;
}

#bar {
  background: green;
  position: absolute; /*remove bar from document flow*/
  inset: 25px 25px auto; /*position bar 25px from top/right/left*/
}

#main-content {
  background: blue;
}

body {
  display: grid; /*use grid on parent*/
  grid-template-rows: min-content 1fr; /*2 grid rows*/
  position: relative; /*use relative on parent*/
  
  margin: 0;
  height: 100%;
}

html {
  height: 100%;
}
    <div id="header">header</div>
<div id="bar">bar</div>
<div id="main-content">main content</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search