I'm trying to get a fluid grid to work correctly with tables, but tables inside e.g. div.span6 overlap with each other when the browser window is resized.
A problem is illustrated on this page: http://teemukurppa.net/bootstrap_fluid_tables.html Table A and Table B overlap when window is resized, but Table C and Table D work correctly. If I try to layout headers and tables together inside a couple of div.spanX on a fluid row, tables overlap when the window is resized. row-fluid div.span6 div.span6 h3 h3 table table But if I put tables directly under row-fluid without header tags, it works correctly: row-fluid table.span6 table.span6 When I put a header and a paragraph inside a div.spanX of a fluid row, layout works correctly when window is resized to a smaller size, I'd like to get a similar effect for tables. row-fluid div.span6 div.span6 h3 h3 p p How should I design my HTML and CSS to make this work correctly?
