Question

I have the following HTML with the div.logo centered in the middle.

What would be the easiest cross browser solution to allow me to put another box contactDetails onto the left or right but retain the centered image?

HTML:

<div id="page-wrap">
    <header>
        <div id="logo">
                <img src="_assets/images/logo.png" width="500" height="518"/>
                <h3>New Website Soon</h3>
        </div><!--END logo-->
        <div id="contactDetails">
            <p>Content</p>
        </div>
    </header>
</div><!--END page-wrap-->

CSS:

*{
    padding: 0;
    margin: 0;
}
body{
    background:url('../images/background.png') repeat;
    margin: 0 auto;
}
div.page-wrap,header,div.logo,h1{
    font-family: arial;
    text-align: center;
    margin:0;
}
div.page-wrap,header,div.logo,img{
    border-radius: 5px;
}
div.contactDetails{
    float: left;
    margin: 0;
}

Answer 1

Position the contact box absolutely.

For what it’s worth, none of your CSS above will work because you’re using a dot to signify the class of the div, rather than a # pound sign to signify ID of the div (div.logo corresponds to <div class="logo">, div#logo corresponds to <div id="logo">)

#page-wrap {
/* parents of absolutely positioned elements must have a position */
position: relative;
}

#contactDetails {
position: absolute;
top: 0;
right: 0; 
/* you could use 'left: 0;' instead, to move to the left edge */
width: 300px;
}