Question

I have solutions that work in all browsers except IE, so I’d appreciate if the answers worked in IE.

<div id="content">
        <div id="redBar"></div>

        <div id="main">
            <div id="header">
                <img src="images/header.gif" id="logo1">
            </div>

            <div id="explanation">
                Next div.
            </div>
        </div>

        <div id="footer">

        </div>
    </div>

I guess I’ll just give the CSS too:

    #main
{
    padding-left:229px;
    padding-right:229px;
}



#logo1
{
    width:auto;
    z-index:1;
    position: relative;
    left:250px;
}

#main
{
    //background-image:url('../images/indexBack.gif');
    background-repeat:repeat-xy;
    width:980px;
}

Answer 1

Well what you’re trying to do is relatively simple but you’re putting your logo nested in a few block elements that might mess it up because they don’t have the necessary styling applied to them…

A visual image of the different areas would help but heres what I think you’re trying to do. I am asuming you want the entire page centered too (if not then it is impossible with your current html).

(Also you defined the css class for #main twice)

<div id="content">
    <div id="redBar"></div>

    <div id="main">
        <div id="header">
            <img src="images/header.gif" />
        </div>

        <div id="explanation">
            Next div.
        </div>
    </div>

    <div id="footer">

    </div>
</div>

<style>

#main
{
    background-image:url('../images/indexBack.gif');
    background-repeat:repeat-xy;
    width: 980px;
    margin: 0 auto;
}

#header img /* don't put un-needed ids on elements */
{
    display:block; /* img is an inline element by default but we want it as a block so margin works */
    margin: 0 auto;
}

</style>