Why the background is not showing up? (CSS problem)

I have the following Xul:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://bartest/skin/bartest.css" type="text/css"?>

<window width="400" height="300"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <vbox id="backBox">
        <hbox id="frontBox">

            <!-- this label i开发者_JAVA技巧s needed, else this box doesn't show up -->
            <label value="" />

        </hbox>
    </vbox>

</window>

with the following CSS:

#backBox {
    background-color: red;
    width: 200px;
    position: fixed;
    left: 0;
}

#frontBox {
    background-color: blue;
    width: 100px;
    position: fixed;
    left: 0;
}

I expected to see a 200px red box, and a 100px blue box inside. But what I'm seeing is just the 100px blue box.

Why the red box (id="backBox") is not showing up?

What should happen here is that both the boxes should be stretched to the width of the window, because you haven't told them not to, and containers stretch their children by default. If you want their boxes to respect their CSS width then you need to change their alignment which is achieved either by the align="start" attribute or CSS -moz-box-align: start; but note that these belong on the parents i.e. the window and the vbox.