CODEWITHSUNDEEP
csscenteringcss-tables
G Stewpot
G Stewpot

Reputation: 97

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.

Upvotes: 2

Views: 849

Answers (2)

Martin
Martin

Reputation: 5623

I noticed that the "messages" area is loaded at runtime using JavaScript.

Initially there is no content in the div:

<div id="messages" style="float:right;  display: inline; width:20%;"></div>

Perhaps you can try to add nbsp; inside the div like this. This might make the "20%" width to work.

<div id="messages" style="float:right;  display: inline; width:20%;">&nbsp;</div>

What I saw is that after the first page load the table is centered to the whole window, as if the "messages" div was not there (which is correct, because its content is loaded afterwards). Then, when the content of the "messages" is present, the table centers to the remaining width.

Upvotes: 0

Facius
Facius

Reputation: 26

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;

Upvotes: 1

Related Questions