NickD NickD - 4 months ago 11
CSS Question

When change position to fixed it losses his justify

I am trying to make a table (with divs). When changing the header to position fixed (dont want to hide header when there are more data and scrolls) it moves all header-cels to the right. I tried to change margin-left to any header-cell to moving at his right position. (repositioning)

The problem is, that when trying to resize the browser window, header titles and data did not displayed correctly and loose their justify..

How to correct header-cels moving (following) data?



body {width:100%; height:300px; background-color:#1f1e1e; overflow:auto;}

.records {width:99%; height:200px;}

.header-cell {height:20px; width:20%; background:#3a3a3a; color:#fff; display:inline-block; margin-left:0px; margin-bottom:4px; }

.cell {height:20px; width:20%; background:#ccc; display:inline-block; margin-left:0px; margin-top:2px;}

<div class="records" >
<div id="header">
<div class="header-cell">#</div>
<div class="header-cell" style="margin-left:-4px;">Name</div>
<div class="header-cell" style="margin-left:-4px;">Movie</div>
<div class="header-cell" style="margin-left:-4px;">Episodes</div>
<div class="header-cell" style="margin-left:-4px;">Age</div>
</div>
<div id="row1">
<div class="cell">145</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
</div>
<div id="row2">
<div class="cell">145</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
</div>
<div id="row3">
<div class="cell">145</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>
<div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
</div>
</div>




Answer

With position: fixed; the div loses the width so you should add also width: 100%;

You should also add padding-top to the first row:

body {width:100%; height:300px; background-color:#1f1e1e; overflow:auto;}

.records {width:99%; height:200px;}

.header-cell {height:20px; width:20%; background:#3a3a3a; color:#fff; display:inline-block; margin-left:0px; margin-bottom:4px; }

.cell {height:20px; width:20%; background:#ccc; display:inline-block; margin-left:0px; margin-top:2px;}

.header {
    position:fixed;
    width:100%;
}
.row1 {
    padding-top:20px;
}
<div class="records" >
  <div id="header" class="header">
      <div class="header-cell">#</div>
      <div class="header-cell" style="margin-left:-4px;">Name</div>
      <div class="header-cell" style="margin-left:-4px;">Movie</div>
      <div class="header-cell" style="margin-left:-4px;">Episodes</div>   
      <div class="header-cell" style="margin-left:-4px;">Age</div>
  </div>  
  <div id="row1" class="row1">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row2">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
  <div id="row3">
      <div class="cell">145</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">J. Snow</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">Game Of Thrones</div>
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">2-3-4-6-11</div>    
      <div class="cell" style="margin-left:-4px;white-space: nowrap;">27</div>
  </div>
</div>

Comments