I need to have two columns of content in a template. Either column can have any number of items in it, so I cannot control the depth, nor can I count on the fact that one will be longer than the other.
The content in the right column can hold text or images, and I cannot control the width of the elements in it. The only thing I can control is the width of the left column.
Ideally, the content will stretch to fill the width of the screen (minus margins), but if the content in the right column is too wide for the screen a horizontal scrollbar will appear.
If you're using Mozilla or Safari, change the width of the page and you'll see my desired result. If you're using IE6, change the width of the page and you'll see the thorn in my side...
.floatDiv {
float: left;
width: 200px;
height: 300px;
padding: 5px;
border: 1px dashed #000;
}
.contentDiv {
position: relative; /* Fixes the peekaboo bug here */
border: 1px dashed #C00;
padding: 5px 5px 5px 220px;
}
This is an element that is 300px wide
This is an element that is 400px wide
This is an element that is 500px wide
This is an element that is 600px wide
In IE6, at least, the placement of the too-wide element is dictated by the height of the floated div, even though the floated div is positioned in a way that it doesn't touch the too-wide element. While the x coordinate of the too-wide element does not change, the y coordinate does, and the item falls below the floated div.
OK, so the x coordinate does change a bit as a result of the three-pixel jog bug, but I'm not convinced that fixing that will solve my problem. I've been playing with the Holly Hack, but I'm not finding an implementation that helps me.
Absolute positioning is not an option as either column may be longer. I've spent far too long on this and I may be blinded to other more obvious solutions, but I'm at a loss and this seems like it should be easy. If there's a way to achieve this a totally different way (without frames), I'm all ears.
Thanks for the help.
--Andy