Widget HTML order

I may be wrong here but I am wondering about the HTML order for the widgets specifically in relation to these three css snippets:

‘.widget { }

.widget-inside { }

.widget-title { }’

After messing around with the style for ages trying to get the code compatible with IE6 (I know), I have come to the conclusion that the code is like this:

‘<div class=”widget”>
<div class=”widget-inside”>
<div class=”widget-title”>
</div>
</div>
</div>’

I was thinking that it might be better if the code was in this order:

‘<div class=”widget”>
<div class=”widget-title”>
</div>
<div class=”widget-inside”>
</div>
</div>’

The reason I think that this order is better is because the widget-title won’t be affected by the widget-inside conditions.

The problem I was having was that I wanted the widget-title to be a simple black bar 275 pixels wide, the same as the widget itself but in IE6 (about 50% of my demographic are still using it) I couldn’t do it. Either it was not covering 275 pixels (I need padding for the widget-inside) or it would push the widgets underneath the content.

The solution I found for this is to use an image as the background of the widget itself. 25px high by 1px repeat-x.