Hey Guys, The following CSS is yielding (what I think) is an unexpected result. I'd like the red box to occupy 39% of the size of the container and the green box to occupy 60% of the container. Instead, both boxes are sized just large enough to contain the text within the span..... any help for his newbie would be greatly appreciated. <div style='width: 300px; border: thin solid black;'> <span style='width:39%; border: thin solid red;'> red </span> <span style='width:60%; border: thin solid green;'> green </span> </div> Sonny.
... i don't think SPAN supports width parameter... it's an inline element, not caring about width settings... ? (correct me if i'm wrong pls)
I used a pixel width for span before and it DID work for me. Its not a block element but look at setting display: block;
IE007 hit it on the head - by default spans are display:inline, which means they shrink to the size of their content (among other things) - display:block; lets you set their width, but then they are block meaning if you want them on the same line you need to mess with floats. (though IE in quirks mode WILL incorrectly let you set the width on inline elements, confusing the matter further - again another reason to use a valid doctype and take IE out of quirks so it works like RoW) Depending on the complexity of what's REALLY going in the spans, you could try display:inline-block; - but being that firefox STILL screws this up even with their -moz specific versions, and all browsers screw up positioning based on such elements, it's not always an ideal solution. Oh, and I do NOT recommend using the named border-widths as they are not uniform cross browser. You want thin, use 1px - I also do NOT recommend using % widths inside a px container because rounding differences between browsers can cause them to be off-size. px outer container, do the math and use px inner containers - in this case I'd probably use 118px for the first and 178px for the second (assuming 1px borders) Good rule of thumb - once you commit to a metric (px, pt, %/em, etc), stick with it.