Link to home
Start Free TrialLog in
Avatar of Ian White
Ian WhiteFlag for Australia

asked on

CSS Html5 Table expanding and wont fit

Here I have a table which expands when more data and would not fit page
I have adjusted the CSS just for this page (from the standard templated) to try and fit it - with different results - right col goes blank or in the case below table intrudes into left col

http://www.housecarers.com/test4/advanced-search-results-housesit.cfm?co=all&SearchType=classic

Please help - I specifically changed for this page only below :

body.ad-search.find-house  #main{
  width: 1200px;
}
body.ad-search.find-house.right-main  #middle .right-col {
  float: left;
  margin-left: 48px;
  width: 800px;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of s8web
s8web

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of s8web
s8web

Troubleshooting before you get the page straight will cause a bunch of frustration.

I just noticed that there's a <body> tag in your table. That will definitely cause problems.
Avatar of Ian White

ASKER

I got rid of all the validation erros and unballenced div tags - except where it complains about & in querystrings which I am going to ignore and misuse of one <legend> in form which I dont follow but wont impact this.

I put back the output loop as the problem only happens with more data and the table expanding

As you can see from :

http://www.housecarers.com/test4/advanced-search-results-housesit.cfm?when=&dateformatin=dd-mm-yy&co=All&sta=&cd=&ci=&SearchType=classic

As you can see he table encroaches on the left margin.  It am playing around with the CSS to accomodate this - but not an expert. The CSS was originaly given to me by a design house who are not supporting me - too busy with corporates.

Here is my attempt, which was suggested, but has the problem.
body.right-main #middle .right-col {
  float: left;
  margin-left: 48px;
  width: 632px;
}
/** Ian White 14/11/12 accommodate table results ***/
body.ad-search.find-house  #main{
  width: 1200px;
}
body.ad-search.find-house.right-main  #middle .right-col {
  float: left;
  margin-left: 48px;
  width: 800px;
}
/** Ian White 14/11/12 accommodate table results END ***/
I played around and this worked

/** Ian White 14/11/12 accommodate table results ***/
body.ad-search.find-house  #main{
  overflow:visible;
}
body.ad-search.find-house.right-main  #middle .right-col {
  float: left;
  margin-left: 48px;
}
/** Ian White 14/11/12 accommodate table results END ***/
Except on Ipad it still intrudes into left column
Thanks - that helped