Hey everyone. Just trying to make my first skin here.

Here's my HTML:

    <div id="container">
        <div id="ControlPanel" runat="server" />
        <div id="header">
            <div class="logo float-left">
                [LOGO]
            </div>
            <div class="search float-left">
                [SEARCH]
            </div>
            <div class="menu clear">
                [MENU]
            </div>
            <div class="breadcrumb">
                [BREADCRUMB]
            </div>
        </div>
        <div id="TopPane" runat="server">
        </div>
        <div id="ContentPane" runat="server">
        </div>
        <div id="LeftPane" runat="server">
        </div>
        <div id="RightPane" runat="server">
        </div>
        <div id="BottomPane" runat="server">
        </div>
        <div id="footer">
            [COPYRIGHT]&nbsp;::&nbsp;[TERMS]&nbsp;::&nbsp;[PRIVACY]
        </div>
    </div>
 

And here's my CSS:

html
{
    height: 100%;
}
body {
    padding: 0px;
    margin: 0px;
    height: 100%;
    font-size: 62.5%;
    text-align: center;
}
#container {
    width: 100em;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}
#header
{
    width: 100em;
}
#footer
{
    width: 100em;
    text-align: center;
}
#TopPane{
    width: 100em;
}
#ContentPane{
    width: 56em;
    padding-right: 44em;
    float: left;
}
#LeftPane{
    width: 22em;
    margin-left: -44em;
    float: left;
}
#RightPane{
    width: 22em;
    margin-left: -22em;
    float: left;
}
#BottomPane{
    width: 100em;
    clear: both;
}

/* Skin Object Styles */

.logo
{
    width: 45em;
    margin-right: 55em;
}
.logo img
{
    width: 45em;
    height: 10em;
    border: 0;
}
.search
{
    width: 55em;
    height: 10em;
    margin-left: -55em;

}

 

.menu { width: 100em; }
.breadcrumb { width: 100em; }

/* Generic Styles */

.float-left { float: left; }
.clear { clear: both; }

My "logo" and "search" divs align side by side as expected using the padding and negative margins. Not so on my ContentPane, LeftPane and RightPane divs however. They all take all 100em (1000px in this case) of space within the "container" div.

Could anyone tip me off on how to get this to work for the Pane divs just as it does for the Logo and Search divs I have up there?

Thank you for any help.