In Safari and Chrome, the table is rendered above the sidebar and takes up the whole width of #content. I can fix the bug by specifying a fixed width for the table, what I don't want to do to stay flexible. I couldn't reproduce the bug with a simple table and a floated box - so what is the reason for this behavior? How can I fix it without giving a fixed width to the table?

  • just curious as to why you were reluctant to seta width - the layout is fixed width, so the table couldn't grow wider even if it wanted to :) Tony Crockford almost 7 years ago
  • There is a print stylesheet, where the content is stretched to 100% width. And it is also possible to remove the sidebar (this page belongs to a WordPress theme) and I don't want the user to to have to type in width values for tables. elektrowolf almost 7 years ago

2 answers

1
point

set width:auto on the table.

or give the table a right margin big enough to make space for the floated sidebar.

Answered almost 7 years ago by Tony Crockford
1
point

Since the sidebar has a width of 200px (170px plus 15px padding on both sides), you just need to give the table a right margin of 200px:

 table {
      ...
      margin-right: 200px;
      ...
 }

I tested this in my broswer, and it fixes the overlap problem.

Answered almost 7 years ago by Timothy Armstrong
  • Yep, that's how I solved it now. Although I can't help myself to think there must be a way to do this for a flexible sidebar width... elektrowolf almost 7 years ago
  • width: auto; works and would allow for a flexible sidebar width. Tony Crockford almost 7 years ago