Here is my scenario. I have a container div that has (n) child elements inside it. For this instance lets say there are 2 divs within the container div:
<div id="container">
<div id="col1">
Stuff in col1
</div>
<div id="col2">
Stuff in col2
</div>
</div>
The container div is going to be a percentage of the viewport, say 80%. Now, what I'm looking for is for these two inner divs (col1 & col2) to be inline with each other and take up the same amount of space. So the result should look something like this:
+-------------- container -------------+
| +---- col1 ----+ +---- col2 ----+ |
| | stuff in | | stuff in | |
| | col1 | | col2 | |
| +--------------+ +--------------+ |
+--------------------------------------+
Or if the container width is changed should result in something like this:
+------------------------------ container -----------------------------+
| +------------ col1 ------------+ +------------ col2 ------------+ |
| | stuff in col1 | | stuff in col2 | |
| | stuff in col1 | | stuff in col2 | |
| +------------------------------+ +------------------------------+ |
+----------------------------------------------------------------------+
The inner divs are always of equal width and have some separation from each other. This is similar to a table layout, but I would rather not use tables if possible. I have tried various techniques like floating and displaying the divs inline to no avail. They can never seem to align just right.