organizing absolutely positioned table

Question

hello i was trying to put one table row over another i made a Section as a wrapper and 2 figures with divs inside the section i made it relative and the figures were absolute what troubles me is that when it set to absolute the table row becomes a column and i have no idea how to keep it as a row and just put the bottom row over the top one

this is what i got to i tried alot of different useless tricks and im just stumped :O

 section { display: table; display: block; width: 100%; border-spacing: 0.5em; vertical-align: middle; text-align: center; } figure { display: inline-block; display: table-row; max-width: 25%; } div.top { text-align: center; display: inline-block; background-color: grey; width: 200px; height: 200px; border: 10px solid rgba(0, 0, 0, 0.1); } div.bottom { text-align: center; display: inline-block; background-color: grey; width: 200px; height: 200px; border: 10px solid rgba(0, 0, 0, 0.1); } 

  <section style="position: relative;"> <figure style="position: absolute;"> <div class="top">H</div> <div class="top">G</div> </figure> <figure style="position: absolute;"> <div class="bottom">A</div> <div class="bottom">B</div> </figure> </section> 

Answer 1

It becomes a columns because it wraps. When you give it absolute position it's "max-width" style is relative to "section".

I don't know what you want to achieve but look here.

When figure have 100% it stays horizontal: https://jsfiddle.net/v0zq0en8/

width: 100%;

Another solution is to add "nowrap" to figure: https://jsfiddle.net/0twvzbaq/

max-width: 25%;
white-space: nowrap;

Answer 2

In removing the position sets, both Divs line up as expected. Is this jsfiddle demo not what you are looking for them to do?

<section>
  <figure>
    <div class="top">H</div>
    <div class="top">G</div>
  </figure>
  <figure>
    <div class="bottom">A</div>
    <div class="bottom">B</div>
  </figure>
</section>