CSS Aligning two DIVs side-by-side in the center. with position absolute

Question

I was wondering how to align two elements side-by-side to the center of the page with position absolute. But when I am trying, I don't get that right. For my code, refer to this link: http://jsfiddle.net/6FnRr/

So basically this is what I want:

 ______________________                        _________
|                      |                      |         |
|                      |                      |         |
|                      |                      |         |
|______________________| (5px Gap here)       |_________|

In the wrapper, they have position: absolute; Both those containers must be aligned side-by-side in the center with 5px gap between them. Please help me out, I have no idea how. I tried every single thing I know.

Answer 1

You might be interested to use display: inline-block + text-align: center; + vertical-align: top :

Fiddle

Answer 2

Don't use absolute! You want float: left.

.myblocks {
    float: left;
}
.myfirstblock {
    margin-right: 5px;
}

Make sure you clear it after.

Answer 3

http://jsfiddle.net/6FnRr/3/

  #work_holder {
        width: 100%;
        position: abosulte;
    }
    #work_container {
        background: #FFFF00;
        position:absolute;
        width: 681px;
        height: 256px;
        float: left;
    }
    #work_details {
        background: #00FF00;
         position:absolute;
        left:686px;
        width: 223px;
        height: 256px;
        float: left;
    }

Answer 4

DEMO

Try this css:

#work_holder {
    width: 100%;
    position: relative; /* parent should be relative */
    clear: left;
    margin-left: auto;
    margin-right: auto;
}
#work_container {
    background: #FFFF00;
    position:absolute; /* child absolute relatively to the parent*/
    width: 681px;
    height: 256px;
    float: left;
    margin-left: auto;
    margin-right: auto;
}
#work_details {
    background: #00FF00;
     position:absolute; /* child absolute relatively to the parent */
    left:686px; /* 681px + 5px;*/
    width: 223px;
    height: 256px;
    float: left;
    margin-left: auto;
    margin-right: auto;
}

Answer 5

You can set your div's right and left to center of the page and add margin to both for gap. This will align the gap exactly on the center of your wrapper div. Here is JSFIDDLE.

#work_holder {
    width: 100%;
    position: absolute;
    clear: left;
    margin-left: auto;
    margin-right: auto;
}
#work_container {
    position: absolute;
    background: #FFFF00;
    width: 681px;
    height: 256px;
    right: 50%;
    margin-right: 3px;
}
#work_details {
    position: absolute;
    background: #00FF00;
    width: 223px;
    height: 256px;
    left: 50%;
    margin-left: 3px;;
}