Question

Possible Duplicate:
Centering one div while another div is floated to the right?

I’m trying to center container1 and float container2 to its right so that it’s flowing off of the page slightly:

Example: https://i.stack.imgur.com/I7nJx.jpg

Unfortunately, container2 is hopping below and to the right of container1, as you can see in the site mock-up (link right below.)

SITE MOCK-UP:
http://ad313.samrandolphdesign.com/

CSS:

#container1 {
    margin: auto;
    background-color: #FFF;
    width: 80%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 15px;
    display: block;
}

#container2 {
    background-color: #CC9900;
    max-width: 600px;
    width: 80%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    float: right;
    display: block;
}

Answer 1

Try using absolute positioning instead of floating.

Something like:

#container1 {
    margin: auto;
    background-color: red;
    width: 50%;
    height: 100%;
    max-width: 600px;
    padding-bottom: 15px;
    text-align: center;
    display: block;
    position: absolute;
    left: 25%;
}

#container2 {
    background-color: #CC9900;
    max-width: 600px;
    width: 50%;
    height: 100%;
    padding-top: 60px;
    padding-bottom: 50px;
    text-align: center;
    display: block;
    position: absolute;
    right: -25%;
}​

Here is a jsfiddle
EDIT: If you don’t want absolute positioning for container1, just add top: 0; to container2