So I’m doing a job that requires a horizontally centered, two-column, semi-liquid layout (except in IE6, it will be fully static since IE6 does not support min/max height/width attributes). One colum is horizontally stretchy, the other is static width. Everything was going perfectly fine, and overall, things are still well, but I’ve hit a small roadblock I’m hoping some CSS smarty might be able to help me work around.
In my stretchy column, I have a module that is also horizontally stretchy to span the entire width of the column at whatever size the column is. The columns and the module work fine, the issue is what is inside the module. The following markup is the basic layout of the module:
<div id="module">
<div class="left">content</div>
<div class="right">content</div>
</div>
I need the left content inside the module to be horizontally stretchy also, and the right to be static.
The Problem -
I can not think of a way to make this happen! I can’t get the right and left content positioned inside the module while maintaining the flexibility of the left content inside the module and ensuring that none of the content in either column will spill out of the module itself. The module should expand vertically to hold the content.
Some things I have noted in efforts to narrow down a solution to this are as follows:
1. I cannot float the left content because it will no longer stretch.
2. I cannot float the right content because in some cases, the right column will be longer than the left and would leak outside the module because the module itself is not floated.
3. I cannot add a float to the module itself in order to use point #2 because then my module will not be stretchy.
4. I cannot absolute position the right content because it will no longer take up space in the module and will leak out of the module.
5. Relative position the modules? Yeah right…
I’m out of ideas, does anyone have any ideas about how I might be able to tackle this?
Thanks in advance for any suggestions!