How to align html elements horizontally when they have different parents-CodePudding

I have a basic html document with a sticky header and footer. I also have a div below the header that sticks to the header because it will eventually contain some tabs above a form. I have tried to align the form below this vertically but they don't line up. The problem is the tab div does not have a scrollbar but the form does. This means the width of the form is different to the width of the tabs. I tried to set them to 70% of the width and center but, because of the scrollbar they don't line up. I've tried some javascript to get the width of the scrollbar and then add this to the current right margin but it doesn't work. You will see the form is not as wide as the tabs div. I have spent hours on this. Also, I tried adding a margin-bottom to the form but no margin appears below the border.

$(document).ready(function () {
  setFormsWidth();
});

function setFormsWidth() {
   
  let scrollbox = document.createElement('div');

  // Make box scrollable
  scrollbox.style.overflow = 'scroll';

  // Append box to document
  document.body.appendChild(scrollbox);

  // Measure inner width of box
  scrollBarWidth = scrollbox.offsetWidth - scrollbox.clientWidth;
  

  // Remove box
  document.body.removeChild(scrollbox);

  // Get current width of right margin, which should be 30% of the
  // width of the form-panel parent (the content class). 
  var formPanel = document.getElementById("main-form");

  // Get the current right margin and remove the px at end of number
  var style = window.getComputedStyle(formPanel);
  var marginRightString = style.getPropertyValue('margin-right');
  var marginRight = marginRightString.slice(0,-2);

  // now addthe scrollBarWidth to the right margin
  var newMargin = marginRight   scrollBarWidth;

  formPanel.style.marginRight = newMargin   "px";

}

html, body {
  height: 100%;
  margin: 0;
  overflow:hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.page {
  flex: 1;
   overflow: auto; 
   background: pink;
}

.content {
  background-color: green;;
}

.tabs {
  width: 70%;
  height: 50px;
  background-color: aqua;
  margin: 0 auto;
  border-bottom: solid #FE6D73 7px; 
}

.form-panel {
  width: 70%; 
  height: 1000px;
  background-color: #FFF;
  margin: 0 auto;
  overflow-y: auto;
  border-bottom: solid #FE6D73 7px; 

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  
  <div >
    <div >Header</div>
    <div >
      THIS IS TAB
    </div>
    <div  id="calculator">
      <div style="height:1000px;">
        <div >
       
          <form  id="main-form">THIS IS FORM</form>
            
      </div>
      </div>
    </div>
    <div >Footer</div>
  </div>

  <script type="text/javascript" src="script.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


</body>
</html>

CodePudding user response：

I suggest to show the scrollbar besides .form-panel element but not .page div, so it will not affect centering .form-panel element.

Here is how to change the css.

Set height to 100% for all elements between .page and .form-panel elements, including .form-panel itself, so that scrollbar for .page will not be shown
Set box-sizing: border-box; for .form-panel, so that the border is drawn inside .form-panel
move .footer outside .page element

If you would like to set a specific height for .form-panel, you can create a div inside it and set its height like below:

html, body {
  height: 100%;
  margin: 0;
  overflow:hidden;
}

.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.page {
  flex: 1;
   overflow: auto; 
   background: pink;
}

.content {
  background-color: green;
  height: 100%;
}

.tabs {
  width: 70%;
  height: 50px;
  background-color: aqua;
  margin: 0 auto;
  border-bottom: solid #FE6D73 7px; 
}

.form-panel {
  width: 70%; 
  height: 100%;
  background-color: #FFF;
  margin: 0 auto;
  overflow-y: auto;
  border-bottom: solid #FE6D73 7px; 
  padding-bottom: 7px;
  box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  
  <div >
    <div >Header</div>
    <div >
      THIS IS TAB
    </div>
    <div  id="calculator">
      <div style="height:100%;">
        <div >
       
          <form  id="main-form">
            <div style="height:1000px">
              THIS IS FORM
            </div>
          </form>
            
      </div>
      </div>
    </div>
    <div >Footer</div>
  </div>



</body>
</html>