G Stewpot G Stewpot - 3 months ago 8
CSS Question

CSS table jumping side to side ?

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.

Answer

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;
Comments