Question

I have a site in PHP, the design is about 800 pixels wide and centered on the page.

I want to add a chat to it, so that when it opens, it fixes to the right side of the page (about 25% wide) and pushes the rest of the page over to the left, so that my design re-centres, but now having this chat ‘frame’ open on the right.

I don’t know if i’m explaining myself well, but I’ve got a chat and everything set up, and I know how to fixed position div tags to the right, it’s just the part about getting the rest of the page to recentre if the chat ‘frame’ is opened.

Is there anyway to do this without starting from base again?

eg. chat closed

--------------------------
|    ________________    |
|    |              |    |
|    |              |    |
|    |     site     |    |
|    |              |    |
|    |              |    |
|    ----------------    |
|                        |
-------------------------

eg. chat open

---------------------------
| ________________  |     |
| |              |  |  c  |
| |              |  |  h  |
| |     site     |  |  a  |
| |              |  |  t  |
| |              |  |     |
| ----------------  |     |
|                   |     |
---------------------------

Answer 1

Pure CSS center-alignment of independent elements without known width is a canonically tricky thing to achieve, so I believe JavaScript is the solution here. The following solution wraps “site” and “chat” into a centered div, augmenting the width of the wrapper to account for the presence of the chat window:

         #wrapper
---------------------------
| ________________  |     |
| |              |  |  #  |
| |              |  |  c  |
| |    #site     |  |  h  |
| |              |  |  a  |
| |              |  |  t  |
| ----------------  |     |
|                   |     |
---------------------------

With the following initial styles:

#wrapper {
    margin: 0 auto;
    width: 800px; // <-- this needs to increase when chat is visible! 
}
#site {
    float: left;
    width: 800px;
}
#chat {
    display: none; // change to 'display: block;' to to reveal
    float: right;
    width: 200px;
}

Since JavaScript is needed to toggle the chat element, we can dynamically modify the width of #wrapper at the same time. Here’s an implementation that uses jQuery, which is recommended for reasons of code-conciseness, x-browser compatibility, and online community:

$('#chatbtn').click(function(){
    var xcurr = $('#wrapper').width();
    var xtend = $('#chat').width();
    if ($('#chat').is(":visible")) xtend = -xtend;
    $('#wrapper').width(xcurr + xtend);
    $('#chat').toggle();
});​

That should do it!

• Please see a DEMO.