CSS layout/flow

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.

Welcome to Stack Overflow, @pat! In the future, you can make your code look like code by indenting each code line with four spaces. Otherwise the formatter gets confused and thinks you're trying to mark up your actual post. I fixed it for you this time. — Pops
– Pops, Commented Apr 4, 2011 at 21:08

Ender · Accepted Answer · 2011-04-04 21:23:28Z

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

answered Apr 4, 2011 at 21:23

Ender

15.3k8 gold badges38 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Basic · Accepted Answer · 2011-04-04 21:10:10Z

0

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

Good luck.

answered Apr 4, 2011 at 21:10

Basic

1,8665 gold badges22 silver badges31 bronze badges

Comments

Marnix · Accepted Answer · 2011-04-04 21:13:49Z

0

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. */
}

answered Apr 4, 2011 at 21:13

Marnix

6,5874 gold badges47 silver badges84 bronze badges

Comments

DA. · Accepted Answer · 2011-04-04 21:15:05Z

0

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

answered Apr 4, 2011 at 21:15

DA.

40.8k51 gold badges162 silver badges219 bronze badges

2 Comments

Marnix Over a year ago

Positioning on the same place, because it's an underlay. Seems quite logical to me.

DA. Over a year ago

If by 'on top of each other' the OP meant layered, then I guess that makes sense. I read that 'on top of each other' as one being higher on the page than the other one right below it.

Collectives™ on Stack Overflow

CSS layout/flow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related