Okay, I've gone off of the advice of similar questions to this, but still have yet to get it working. I'm working in IE 6, and this happens to be the only browser accessible to me from where I am.
I have a layout that is all relative positioning. Referring to Sample 1, I need Box 3's length to be that of Box 1.
I've checked out the Box-Model, Faux Column hacks and haven't been able to get it working. Could I be possibly making this too hard for myself or what?
Here is relevant CSS:
<!-- Box 1 --> .content { position:relative; width:auto; min-width:450px; min-height:660px; margin:50px 200px 0px 260px; border:1px solid #ccc; background: #fff; padding:10px 30px 20px 30px; z-index:1; background: url(./blank.gif) repeat-y 50% 0; voice-family: "\"}\""; voice-family:inherit; } * html .content { /* hack for .content min-height in IE */ height:500px; width:450; } <!-- Box 2 --> .left { position:relative; width:168px; margin:50px 0px 0px 100px; z-index:2; float: left; clear:left; voice-family: "\"}\""; voice-family:inherit; } <!-- Box 3 --> .left#leftTwo { position:relative; width:166px; margin:-8px 0px 0px 100px; height:auto; border:1px dashed #ccc; padding:10px 10px 20px 10px; background: #eee repeat-y url(./blank.gif); z-index:2; float:left; voice-family: "\"}\""; voice-family:inherit; }
Please feel free to critique any of the code. I know I look like I'm going into this blindly with IE6 development, but those are the standards of this client (so it's better!).
Any advice is welcome. Perhaps I am going about the box model hacks incorrectly. Or does this not work well with a relatively positioned layout?