Center layout with padding in order to display a div with JavaScript / AJAX

i have some troubles implementing this layout: http://deconcini.net/maurer-schneebacher/projekte/elisabethinum.html

Basically i would like to display the div with the pictures as soon as the user clicks on one of the links. The problem is, that the centered navigation is in a container

    #maincol{
      width:940px; 
      padding: 0 auto;
      border: 0px solid;
      margin:0 auto; 
      background-color: #FFFFFF;  
      position: relative; 
      /* other attributes */
    }

while the div i have to display has its own (grey) backgound which reaches through the whole width of the screen.

To implement it i had to close the maincol and open a new div called "selection" with the grey background which contains another div called "container", which is centered and contains the images.

     #selection {
         background: #DDDDDD;
         margin: 10px 0 10px 0;
         padding: 0;
         width: 100%;
     }

    .container {
         width: 940px;
         margin: 0 auto;
         overflow: hidden; 
    }

After this div's i re-open the maincol.

Now i would like to display this div's with javascript or AJAX. The problem is that i find it pretty hard to close a div, re-open and close a div again and than re-open the maincol div. So i was wondering if it is possible to center the whole layout with padding, so i can set the grey background there and simply insert a new div with javascript without the need to close and re-open the maincol div.

I'm not very experienced with html and I wasn't able to find an answer on the web. So I would be very gratef开发者_JAVA技巧ul if someone could give me a hint :-)

Best regards

Phew, okay here you go: http://jsfiddle.net/chricholson/25Yew/46/

Half way through I realised that you hadn't specified jQuery, but by then I had nearly done it. You can translate it to traditional Javascript if you like but I would highly recommend a library as it will save you many hours.

So onto the script, this detects the list item that has been clicked and moves it from the list before/after the "selection" div to the list after/before respectively. This keeps the lists clean and tidy and means you only have the one grey box in the middle.

You can animate as you see fit.

Notice that I have simple set the "selection" box to be filled with the contents of the list item clicked. In reality, you may want to put an id on each list item and have that load the content into the "selection" box, either with an array or an ajax call.

Good luck! :)

HTML:

<div id="mainCol1" class="col">
<ul>
    <li>hello world 1</li>
    <li>hello world 2</li>
    <li>hello world 3</li>
</ul>
</div>
<div id="selection">
    selection
</div>
<div id="mainCol2" class="col">
    <ul>
        <li>hello world 4</li>
        <li>hello world 5</li>
        <li>hello world 6</li>
    </ul>    
</div>

Javascript (actually jQuery):

$('#mainCol1 li').click(function(){

    var item = $('#mainCol1 li').index(this);
    var total = $('#mainCol1 li').length - 1;
    fillSelection($('#mainCol1 li:eq(' + item + ')').html());
    for(i = total; i > item; i--){
        $('#mainCol2 ul').prepend($('#mainCol1 li:eq(' + i + ')'));
    }

});

$('#mainCol2 li').click(function(){

    var item = $('#mainCol2 li').index(this);
    var total = $('#mainCol2 li').length - 1;
    fillSelection($('#mainCol2 li:eq(' + item + ')').html());
    for(i = 0; i < item; i++){
        $('#mainCol1 ul').append($('#mainCol2 li:eq(0)'));
    }


});

function fillSelection(html){
    $('#selection').text(html);
}