CSS layout/flow

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 ex开发者_开发百科traInfo to flow after the chart — it always ends up on top of the chart.

---

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->

---

Try adding floats to your divs, and for the extra info add clear: both;

Good luck.

---

Because the content of your #ChartPanel is empty (your tables are absolute, so picked out of the #ChartPanel. You don't have any height left in your #ChartPanel. Try adding height to #ChartPanel.

#ChartPanel { 
    width: 100%; 
    height:500px; /* <-- very new */
    position: relative; }
#chart, #underlay { 
    width: 1185px; 
    position: absolute; 
    top: 0; left: 0; }
#extraInfo { 
     /* maybe even just... nothing, or some relative positioning. */
}

---

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

Why are you positioning both of those tables in the exact same spot?

FYI, when you position: absolute, you take the object out of the document flow, so it gets tricky to then figure out how to visually place something below it, since CSS doesn't know where the bottom of the positioned elements are anymore.

If you need to put things side-by-side, better to use floats, which you can then contain with a parent wrapper.