title: CSS Table-Like alignment using no tables? (CSS RelativeLayout)
body: <p>Wherever I go on the internet, I am constantly having it beat into me that I should not use Tables. Sadly, I am one of the few programmers who is stubborn enough to still be using them -- I frankly find the alignment and layout features of CSS inadequately powerful for me to, cold turkey, stop using tables. With my personal programmer idiosyncrasies set aside, I would like to try to attack one of my major discontentments with the CSS system:</p>
  
  <p>Let's say I want to have a layout like this:</p>
  
  <pre><code>+---+---+
  | A | B |
  +---+---+
  | C | D |
  +---+---+
  </code></pre>
  
  <p>In the above example, I would like the widths of A and C to be the same, and the widths of <code>B</code> and <code>D</code> to remain the same.</p>
  
  <p>I would also like the heights of <code>A</code> and <code>B</code> to remain locked together, and I would like the heights of <code>C</code> and D to stay the same as each other.</p>
  
  <p>To clarify, if any element in a column gets wider, I'd like <em>all</em> of the elements in that column to get wider. And if any element in a row gets taller, I, again, want all of the elements in that very same row to get wider as well.</p>
  
  <p>What I have just described is the exact functionality of our old friend, the table. In my opinion, tables are very useful for these kinds of layouts! If I were to attempt something similar to that using CSS layouts, I might get something like this:</p>
  
  <pre><code>+-------+---+
  |   A   | B |
  +---*---*---+
  | C |   D   |
  +---+-------+
  </code></pre>
  
  <p>Which would very much <em>NOT</em> be the kind of layout I am looking for. (<code>A</code> and <code>C</code> make jagged columns, as opposed to perfect, smooth columns as I would prefer)</p>
  
  <p>To put my problem simply, I could <em>really</em> use a way to, using CSS layouts (and NOT predefined widths or heights) align the position of an edge of one CSS box, to the position of an edge of a different CSS box. If CSS supported that one simple feature, I could instantly let go of tables forever, and create layouts beyond even the capabilities of tables! A good, but useless example of such power would be two disconnected boxes on opposite sides of a table, <em>dynamically</em> sharing exactly the same height and vertical position as each other.</p>
  
  <p>But unfortunately, in my searches around the internet, the most advanced alignment I've found so far is center, left, and right alignment. All alignment types that are not relative to OTHER elements, making them useless.</p>
  
  <p>All I want is just a way to align HTML elements to OTHER HTML elements without having to use tables! </p>
  
  <h1>EDIT</h1>
  
  <p>While picking the tags for this question, I came across a description that pretty much sums it all up:</p>
  
  <blockquote>
    <p>Relativelayout: A Layout where the positions of the children can be
    described in relation to each other or to the parent.</p>
  </blockquote>
  
  <p>Is there a CSS RelativeLayout? Or am I stuck using tables whenever I want to do this?</p>
  
  <p>I will accept the answer that comes closest to my desired functionality without using predetermined widths or heights (Including the answer "Nothing like that exists" if no one else provides something better).</p>