xml onreadystatechange javascript не форматируется

Question

У меня есть база данных изображений, и мой веб-сайт использует небольшую функцию Ajax, чтобы ткнуть в сервер, получить список изображений и отформатировать соответственно.

Вы можете просмотреть живую версию здесь: http://tbremer.com/ (живые ссылки - Архитектура и Концерты).

Мои две проблемы заключаются в следующем:

1. Данные (изображения) не форматируются так, как мне хотелось бы (горизонтальное отображение)
2. тело не прокручивается, когда изображения отображаются правильно.

Теперь для странности. При первом щелчке изображения всегда отображаются вертикально, но если вы снова нажмете на ту же ссылку, изображения будут правильно отформатированы по горизонтали, и все DIV будут иметь соответствующий размер.

Я выложу код ниже.

HTML

<div id="contentWrapper">
    <div id="imageViewer"></div>
</div>

JAVASCRIPT

//___ Ajax call for images
function loadXMLDoc() {
    //___ Variables
    var xmlhttp;

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("imageViewer").innerHTML=xmlhttp.responseText;

            var div = document.getElementById("imageViewer");
            var newDivWidth = 0;
            var imageViewerDivWidth = 290;

            for (i=0;i<div.children.length;i++) {
                //console.log(div.children[i]);

                var imageWidth = $("#portImage"+i).width();
                newDivWidth = imageWidth + newDivWidth + 4;
                console.log(imageWidth+" px.");
                console.log(newDivWidth);
            }

            imageViewerDivWidth = imageViewerDivWidth + newDivWidth;
            $("#contentWrapper").width(imageViewerDivWidth);
            $("#imageViewer").css("width", imageViewerDivWidth);
            console.log("");
        }

    }
    console.log(portLink); //Display link clicked
    xmlhttp.open("GET","includes/displayimagesLive.php?portname="+portLink,true);
    xmlhttp.send();
}

PHP

<?php
require("connect.php");

#___ Get variables from navigation
$portname = $_GET['portname'];
$queryMain = "SELECT id, portfolioName, filename FROM portfolio WHERE portfolioName='".$portname."' AND filename IS NOT NULL";
$getPortSQL = mysql_query($queryMain);

#___ Display!
$i = 0;
while ($nt = mysql_fetch_array($getPortSQL)) {
        echo "<div id='portImage".$i."' class='portImage'>";
            echo "<img src='images/portfolio/$nt[portfolioName]/$nt[filename]' height='500px'>";
        echo "</div>";
    $i++;
}
unset($i);
?>

ОТНОСИТЕЛЬНЫЙ CSS

/* Content Wrapper */
#contentWrapper {
    padding: 0px;
    margin: 0px;

    z-index: 0;

    border: 0px solid #600;
}

/* Image Viewer */

#imageViewer{
    position: fixed;
    left: 0px;
    top: 0px;

    padding: 0px;
    padding-left: 350px;
    margin: 0px;

    border: 0px solid #F0F;
}

.portImage {
    padding: 0;
    margin: 4px;

    border: 1px solid #000;

    float: left;
}