title: HTML CSS : Borders (Boxes) of fixed Divs cross each other when window size changes
body: <p>I want to achieve following design where Header div having class named <code>header</code>, Footer div having class named <code>footer</code> and a Left sided div having class named <code>links</code> are fixed to there position.</p>
  
  <p>The Right sided div named <code>link-contents</code> is the only <code>scrollable</code> part in the page.</p>
  
  <p><a href="https://i.stack.imgur.com/yHdyG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yHdyG.png" alt="Design I am aiming"></a></p>
  
  <p>I am able to achieve Fixed Divs but there are some problems:</p>
  
  <ol>
  <li>When the <code>window size</code> is changed the <code>footer</code> &amp; <code>links</code> div collapse into each other. I expect them to adapt the change like font size must decrease to wrap all words,etc.</li>
  </ol>
  
  <p><a href="https://i.stack.imgur.com/2BM5x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2BM5x.png" alt="Overlap"></a></p>
  
  <ol start="2">
  <li>I don't understand why the <code>header</code> is fixed?
  You can try adding products clicking <code>Add more products</code> Button many times so that <code>submit</code> button goes out of view port and scrollbar appears . On scrolling you will see that <code>header</code> div is fixed.
  <strong>Because I haven't used <code>position:fixed</code>.</strong></li>
  </ol>
  
  <p><strong>But if I use it. It changes whole structure of my page.</strong></p>
  
  <p>CODE SNIPPET (<strong>Please expand the snippet before seeing results</strong>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function show_op(id,lb){
      var ops = document.getElementsByClassName('option-contents');
      var op = document.getElementById(id);
      for (var i = 0; i &lt; ops.length; i++) {
          ops[i].style.display='none';
      }
      op.style.display='block';
      var labels = document.getElementsByClassName('option-links');
      var label = document.getElementById(lb);
      for (var i = 0; i &lt; labels.length; i++) {
          labels[i].style.backgroundColor="transparent";
      }
      label.style.backgroundColor="#cccccc";
  }
  
  
  
  var productsByCategory = {
    A: ["Select sub-product", "CNC 1", "CNC 2", "CNC 3", "CNC 4"],
    B: ["Select sub-product", "LASER 1", "LASER 2", "LASER 3", "LASER 4"],
    C: ["Select sub-product", "RUBBER 1", "RUBBER 2", "RUBBER 3", "RUBBER 4", "RUBBER 5"],
    D: ["Select sub-product", "PRECISION 1", "PRECISION 2", "PRECISION 3"]
  };
  
  var valuesByCategory = {
    A: ["", "A1", "A2", "A3", "A4"],
    B: ["", "B1", "B2", "B3", "B4"],
    C: ["", "C1", "C2", "C3", "C4", "C5"],
    D: ["", "D1", "D2", "D3"]
  };
  
  var mega_clone = document.getElementsByClassName('product')[0].cloneNode(true);
  
  function fill_select(option, target_menu) {
    for (var i = 0; i &lt; productsByCategory[option].length; i++) {
      var op = document.createElement('option');
      op.text = productsByCategory[option][i];
      op.value = valuesByCategory[option][i];
      target_menu.add(op);
    }
  }
  
  function empty_select(target_menu) {
    for (var i = target_menu.length - 1; i &gt;= 0; i--) {
      target_menu.remove(i);
    }
  }
  
  function setdisabled(obj) {
    obj.setAttribute("disabled", "disabled");
  }
  
  function setenabled(obj) {
    obj.removeAttribute("disabled");
  }
  
  function dropdown(obj) {
    var selected = obj.value;
    var target = obj.nextElementSibling;
  
    var quantity_input = target.nextElementSibling;
    var remove_button = quantity_input.nextElementSibling;
  
    empty_select(target);
    if (selected == "") {
      var op = document.createElement('option');
      op.text = productsByCategory[option][0];
      op.value = valuesByCategory[option][0];
      target_menu.add(op);
      setdisabled(target);
      setdisabled(quantity_input);
      setdisabled(remove_button);
    } else {
      if (selected == "1") {
        fill_select('A', target);
      } else if (selected == "2") {
        fill_select('B', target);
      } else if (selected == "3") {
        fill_select('C', target);
      } else {
        fill_select('D', target);
      }
      setenabled(target);
    }
  }
  
  function dropdown2(obj) {
    var quantity_input = obj.nextElementSibling;
    var remove_button = quantity_input.nextElementSibling;
    var add_button = remove_button.nextElementSibling;
    var reset_button = add_button.nextElementSibling;
    var submit_button = reset_button.nextElementSibling;
    setenabled(quantity_input);
    setenabled(add_button);
    setenabled(remove_button);
    setenabled(reset_button);
    setenabled(submit_button);
  }
  
  function new_products(obj) {
    var order = document.getElementById("order_now");
    var form = order.firstElementChild;
    var last_product = form.lastElementChild;
    var clone = last_product.cloneNode(true);
    var reset_button = obj.nextElementSibling;
    var submit_button = reset_button.nextElementSibling;
  
    setdisabled(clone.getElementsByClassName("second_select")[0]);
    setdisabled(clone.getElementsByClassName("s_btn")[0]);
    setdisabled(clone.getElementsByClassName("remove_btn")[0]);
    setenabled(clone.getElementsByClassName("add_btn")[0]);
  
    obj.parentNode.removeChild(reset_button);
    obj.parentNode.removeChild(submit_button);
  
    obj.parentNode.removeChild(obj);
  
    form.appendChild(clone);
  
  }
  
  function reset() {
    var order = document.getElementById("order_now");
    var new_product = document.createElement('div');
    new_product.className = "product";
    order.innerHTML = "";
    order.appendChild(new_product);
    order.lastElementChild.innerHTML = mega_clone.innerHTML;
  }
  
  function remove_product(obj) {
    var order = document.getElementById("order_now");
    if (order.childElementCount == "1") {
      reset();
    } else {
      order.removeChild(obj.parentNode);
    }
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    height: 100vh;
    margin: 0px;
    overflow-y: auto;
    font-family: 'Roboto';
  }
  
  .header {
    display: block;
    background-color: white;
    width: 100%;
    height: 8%;
    font-style: "Roboto";
    font-size: 25px;
    border-bottom: 2px solid;
    border-bottom-color: #cccccc;
  }
  
  .content {
    position: relative;
    display: block;
    background-color: white;
    height: 86%;
    font-family: 'Roboto';
    z-index: 0;
    /*min-height: 87%;*/
    overflow: auto;
    /*padding-bottom: 6%;*/
  }
  
  .footer {
    position: fixed;
    height: 6%;
    width: 100%;
    bottom: 0;
    border: 2px solid;
    border-color: blue;
    box-sizing: border-box;
  }
  
  #clear {
    clear: both;
  }
  
  .links {
    position: fixed;
    display: block;
    float: left;
    width: 30%;
    line-height: 2;
    min-height: 86%;
    font-size: 30px;
    border-style: solid;
    box-sizing: border-box;
    border-color: black;
  }
  
  .link-contents {
    position: relative;
    display: block;
    float: left;
    left: 30%;
    width: 70%;
    border-style: solid;
    box-sizing: border-box;
    border-color: red;
    min-height: 100%;
  }
  
  .option-links {
    display: block;
    cursor: pointer;
  }
  
  #op1 {
    background-color: #cccccc;
  }
  
  select,
  button,
  input {
    position: relative;
    top: 5em;
    display: block;
    width: 12em;
    height: 2em;
  }
  
  button {
    width: 8em;
  }
  
  .first_select {
    position: relative;
    float: left;
    left: 10%;
  }
  
  .second_select {
    position: relative;
    float: left;
    left: 20%;
  }
  
  .s_btn {
    position: relative;
    float: left;
    left: 30%;
  }
  
  .remove_btn {
    position: relative;
    float: left;
    left: 40%;
    width: 5em;
  }
  
  .add_btn {
    display: block;
    float: left;
    top: 7.7em;
    width: 10em;
    left: -14em;
  }
  
  .reset_btn {
    display: block;
    float: left;
    top: 7.7em;
    width: 7em;
    left: -12em;
  }
  
  .submit_btn {
    display: block;
    float: left;
    top: 10em;
    width: 7em;
    left: -24em;
  }
  
  .option-contents {
    display: none;
  }
  
  #order_now {
    display: block;
  }
  
  table {
    table-layout: fixed;
    left: 30%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Profile&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="header"&gt;
  
    &lt;/div&gt;
  
    &lt;div class="content"&gt;
      &lt;div class="links"&gt;
        &lt;span class="option-links" id="op1" onclick="show_op('order_now','op1');"&gt;Order new&lt;/span&gt;&lt;br/&gt;
        &lt;span class="option-links" id="op2" onclick="show_op('current_order','op2');"&gt;Current Orders&lt;/span&gt;&lt;br/&gt;
        &lt;span class="option-links" id="op3" onclick="show_op('previous_order','op3');"&gt;Previous Orders&lt;/span&gt;&lt;br/&gt;
        &lt;span class="option-links" id="op4" onclick="show_op('support','op4');"&gt;Support&lt;/span&gt;&lt;br/&gt;
      &lt;/div&gt;
      &lt;div class="link-contents"&gt;
        &lt;!--  ORDER NOW    --&gt;
        &lt;div class="option-contents" id="order_now"&gt;
          &lt;form action="add_order.php" method="POST" enctype="application/x-www-form-urlencoded"&gt;
            &lt;div class="product"&gt;
              &lt;select class="first_select" name="category[]" onchange="dropdown(this);"&gt;
                &lt;option value="0"&gt;Select&lt;/option&gt;
                &lt;option value="1"&gt;CNS&lt;/option&gt;
                &lt;option value="2"&gt;Laser Cut&lt;/option&gt;
                &lt;option value="3"&gt;Rubber roller&lt;/option&gt;
                &lt;option value="4"&gt;Fixture&lt;/option&gt;
              &lt;/select&gt;
  
              &lt;select class="second_select" name="product[]" onchange="dropdown2(this);" disabled&gt;
                &lt;option&gt;Select Product first&lt;/option&gt;
              &lt;/select&gt;
              &lt;!--&lt;button class="s_btn" onclick="check_products();" value="submit" disabled&gt;Submit&lt;/button&gt;--&gt;
              &lt;input class="s_btn" name="quantity[]" type="number" min='1' value="1" disabled /&gt;
              &lt;button class="remove_btn" id="remove_button" onclick="remove_product(this);" disabled&gt;Remove&lt;/button&gt;
              &lt;button class="add_btn" id="add_button" onclick="new_products(this);"&gt;Add more products&lt;/button&gt;
              &lt;button class="reset_btn" id="reset_button" onclick="reset(this);" disabled&gt;Reset All&lt;/button&gt;
              &lt;button class="submit_btn" id="submit_button" type="submit" disabled&gt;Submit&lt;/button&gt;
              &lt;div id="clear"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
  
        &lt;!--  ORDER NOW    --&gt;
        &lt;!--   CURRENT ORDER    --&gt;
        &lt;div class="option-contents" id="current_order"&gt;
          &lt;?php
       $servername = "localhost";
       $username = "root";
       $password = "";
       $database = "rt";
       $conn = mysqli_connect($servername,$username,$password,$database);
       if (!$conn) {
        echo "&lt;strong&gt;Connection failed &lt;/strong&gt;";
       }
       $sql = "SELECT order_id, product_name, quantity,status FROM orders WHERE user_id='A447ED5'";
       $result = $conn-&gt;query($sql);
       $num=mysqli_num_rows($result);
  
      ?&gt;
            &lt;table border="0" cellspacing="2" cellpadding="2"&gt;
              &lt;tr&gt;
                &lt;th&gt;
                  &lt;font face="Arial, Helvetica, sans-serif"&gt;Value1&lt;/font&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  &lt;font face="Arial, Helvetica, sans-serif"&gt;Value2&lt;/font&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  &lt;font face="Arial, Helvetica, sans-serif"&gt;Value3&lt;/font&gt;
                &lt;/th&gt;
                &lt;th&gt;
                  &lt;font face="Arial, Helvetica, sans-serif"&gt;Value4&lt;/font&gt;
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;!-- LOOP --&gt;
              &lt;?php
       while($row = mysqli_fetch_array($result))
       {
        echo "&lt;tr&gt;";
        echo "&lt;td&gt;" . $row['order_id'] . "&lt;/td&gt;";
        echo "&lt;td&gt;" . $row['product_name'] . "&lt;/td&gt;";
        echo "&lt;td&gt;" . $row['quantity'] . "&lt;/td&gt;";
        echo "&lt;td&gt;" . $row['status'] . "&lt;/td&gt;";
        echo "&lt;/tr&gt;";
       }
      ?&gt;
            &lt;/table&gt;
        &lt;/div&gt;
        &lt;!--   CURRENT ORDER    --&gt;
        &lt;div class="option-contents" id="previous_order"&gt;
          op 3
        &lt;/div&gt;
        &lt;div class="option-contents" id="support"&gt;
          op 4
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="clear"&gt;&lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;div class="footer"&gt;
      A big thank you to all of you.
    &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>