We have a CSS table - made by CSS & DIVS.
The right-side menu is fixed at 20%, & this appears to be working properly...
in the middle of the screen, we have a table of 4-5 rows of information. The top line of the table is a link on each column, for sorting.
it only has a few lines of data (we will add 'pages' in later, when we get more data)
The problem, is that when the page refreshes when we select a link, (the SAME sort, or another sort - or just refresh the screen),the middle table "jumps" left or right.. it doesn't stay in the same position on the screen & is very annoying..
The CONTENT of the table itself is the same width - the table size doesnt change. but the table itself shifts position...
http://animals.kwister.com/directory/region
(try the links on the top of the table).
Is there a way so the table is "fixed" to the 'center' of the available space - reduced by the right menu / right side bar.
Of course, as i add more data / text - The width of the table will increase to cope, but it will remain 'centered'.
We may add a left menu / div in future, we're just developing this site & its not much to show as yet. This is the 1st time ive seen a css table 'shift' like this.
Its caused by the table-layout fixed, and the fact that you are adding the side panel with js.
You should probably look into using a CSS grid like bootstrap's for a more consistent layouts. or make your own with display: block, float: left, and widh: x%;
.column-left, .column-right {
display: block;
width: 20%;
float: left;
}
.column-center {
display: block;
width: 60%;
float: left;
}
or you could do a quick and dirty css fix on the right hand column and position it absolute:
display: block;
width: 20%;
float: left;