Question

I need to stack two tables on top of each other with content before and after. I can’t get the content that comes after to flow properly. The stacked tables are variable height.

HTML structure:

    ... other content ...  
    <div id="ChartPanel">  
      <table id="chart">  
      <table id="underlay">  
    </div>  
    <div id="ExtraInfoPanel">  
      <table id="extraInfo">  
    </div>  

CSS:

#ChartPanel { width: 100%; position: relative; }
#chart, #underlay { width: 1185px; position: absolute; top: 0; left: 0; }
#extraInfo { ??? }

The tables stack nicely, but I haven’t figured out the CSS to get extraInfo to flow after the chart — it always ends up on top of the chart.

Answer 1

I think the problem you are having is that both tables are position: absolute;. This is a problem because it takes them both out of the document flow, meaning that their height will not register as part of the containing parent’s height.

However, you can’t put them both back in the document flow, because then you won’t get the underlay effect. I propose doing something like this:

#chart, #underlay { width: 1185px; }
#underlay { position: absolute; top: 0px; left: 0px; }

Assuming they have the same dimensions, leave one of the tables alone, and make the other positioned absolutely. This will preserve the dimensions of the parent container, and allow both tables to be positioned at the same location.

Have a look at the result here->