Relative positioning of spans inside of spans 1

[marcusmj]

In the following example, I would expect the outermost span to have a width of 100 -- it contains an inner blue span of 100, which is overlapped by a inner green span of 50.

Instead, the outermost span retains a width of 150 -- as though the green span had not been shifted.

<span style='border:1px solid black;'>
<span style='width:100px; background-color: blue;'></span>
<span style='width:50px; background-color: green; position: relative; left: -50px;'></span>
</span>

Trying to force the outer span's width to 100px does not produce the desired result. Is there a rational explanation for this behavior? Also, is there a CSS command that tells a page element to "reset size to minimal required size"? I ask this question under the assumption that if I executed such a command on the outermost span, it would shrink down to the 100px.

I'm working in IE 6.0.2800. Many thanks for any insight!

 

[Vragabond]

IE's support for CSS is not perfect, so you can expect occasional hiccups in many areas. However, it can be persuaded to do what you want of it.

<span style='border:1px solid black;'>
<span style='width:100px; background-color: blue;'></span>
<span style='width:50px; background-color: green; position: relative; margin-left: -50px;'></span>
</span>

This has produced expected result on my IE6 on WinXP. I think it should work with other versions as well. I should warn you though, that if you are looking for a cross-browser compatibility that your approach will not work. Span is an inline element and such elements cannot have width applied to them. Mozilla will thus (correctly) ignore the width properties. If you are looking for a solution for all current browsers look into block elements (div) and float properties. Hope it helps.

 

[marcusmj]

I guess I was trying to put a screw into the wall with a hammer... ie. it sorta worked, but ultimately I was using the wrong tool for the job.

I switched to DIVs as you suggested and they are proving much easier to work with. The float properties are the key. Thanks for the tip.