Два div по горизонтали

Здравствуйте,использую плагин для jquery, называется jqGalViewII.Это обычная галерея для картинок,там два дива создаются один под другим, в верхнем сама картинка, а в нижнем превью.Как сделать так, чтобы дивы создавались не один под другим,а рядом на одной линии?вот код стиля: 
    .gvIIContainer{        width:500px;        position:relative;        background:#000;        padding:5px 0 5px 5px;        /*border:10px solid #fff;*/    }    .gvIIContainer .gvIIImgContainer{        width:490px;        height:385px;    }    .gvIIContainer .gvIIImgContainer .gvIILoader{        background: url(/MAINSITE/images/rel_interstitial_loading.gif) no-repeat center center;        width:490px;        height:385px;        display:none;    }    .gvIIContainer .gvIIHolder{        position:relative;        height:207px;        width:490px;        overflow:auto;    }    .gvIIContainer .gvIIHolder .gvIIItem{        float:top;        height:55px;        width:72px;        border:5px solid #fff;        margin:2px;        position:relative;        overflow:hidden;    }    .gvIIContainer .gvIIHolder .gvIIItem .gvIIFlash{        background:#fff;        position:absolute;        top:0;        left:0;        height:55px;        width:72px;        cursor:pointer;    }    .gvIIContainer .gvIIHolder .gvIIItem img{        position:absolute;        top:0;        left:0;        padding:0;        margin:0;        margin-left:0;        margin-top:0;        border:none;        cursor:pointer;    }
Это сам скрипт.
(function($){    $.fn.jqGalViewII = function(options){        return this.each(function(index){            var el = this, $_ = $(this); $img = $('img', $_);            el.opts = $.extend({}, $.fn.jqGalViewII.defaults, options);            //  swap out current image gallery for jqGalView structure            var $this = $.fn.jqGalViewII.swapOut($_);                        var $container = $('<div class="gvIIContainer">').appendTo($this);            el.mainImgContainer = $('<div class="gvIIImgContainer">').appendTo($container);            el.image = $('<img/>').appendTo(el.mainImgContainer);            el.loader = $('<div class="gvIILoader"/>').appendTo(el.mainImgContainer);            //  Build our holder for the thumbnail images            var $holder = $('<div class="gvIIHolder"/>').appendTo($container);                        var $arrow = $('<div class="gvIIArrow"/>');            //  remove current images and replace with jqGalview            $(this).after($this).remove();                        $img.each(function(i){                var $image = $(this);                                var $div = $('<div id="gvIIID'+i+'" class="gvIIItem">')                .appendTo($holder)                .append('<div class="gvIILoaderMini">');// end : $div                                if(el.opts.getUrlBy == 0)                    this.altImg = $image.parent().attr('href');                else if(el.opts.getUrlBy == 1)                    this.altImg = el.opts.fullSizePath + this.src.split('/').pop();                else if(el.opts.getUrlBy == 2)                    this.altImg = $this.src.replace(el.opts.prefix,'');                                this.altTxt = $image.attr('alt');                                var image = new Image();                image.onload = function(){                    image.onload = null;                    $div.empty().append($image);                    $('<div class="gvIIFlash">').appendTo($div).css({opacity:".01"})                    .mouseover(                        function(){                            var $f = $(this);                            $f.css({opacity:".75"}).stop().animate({opacity:".01"},500);                        }                    )                    .click(                        function(){                            $image.trigger('click');                        }                    );                    $image.click(function(){                        $.fn.jqGalViewII.view(this,el);                               });                    if(i==0){                        $image.trigger('click');                        $image.siblings().trigger('mouseover');                    }                };// end : image.onload                 image.src = this.src;            });                        $arrow.appendTo($holder);        });    };        $.fn.jqGalViewII.view = function(img,el){        if(typeof img.altImg == 'undefined') return false;        var url = /\?imgmax/.test(img.altImg) ? img.altImg : img.altImg+'?imgmax=800';        var $i_wh = {}; //         var $i_whFinal = {}; //         var wContainer, hContainer;        var $w, $h, $wOrg, $hOrg, isOver = false;         el.loader.show();        wContainer = el.mainImgContainer.width();        hContainer = el.mainImgContainer.height();        el.mainImgContainer.show();                el.image.attr({src:url}).css({top:0,left:0,position:'absolute'}).hide();        $img = new Image();        $img.onload = function(){            $img.onload = null;            $w = $wOrg = $img.width;            $h = $hOrg = $img.height;            if ($w > wContainer) {                $h = $h * (wContainer / $w);                 $w = wContainer;                 if ($h > wContainer) {                     $w = $w * (hContainer / $h);                     $h = hContainer;                 }            } else if ($h > hContainer) {                 $w = $w * (hContainer / $h);                 $h = hContainer;                 if ($w > wContainer) {                     $h = $h * (wContainer / $w);                     $w = wContainer;                }            }            el.image.css({width:$w,height:$h, marginLeft:(wContainer-$w)*.5,marginTop:(hContainer-$h)*.5})            el.loader.fadeOut('fast',function(){el.image.fadeIn();});        };        $img.src = url;            };    $.fn.jqGalViewII.swapOut = function($el){        var id = $el.attr('id') ? (' id="'+$el.attr('id')+'"') : '';        var $this = $('<div' + id + '>');        return $this;    };        $.fn.jqGalViewII.defaults = {        getUrlBy : 0, // 0 == from parent A tag | 1 == the full size resides in another folder        fullSizePath : null,        prefix: 'thumbnail.',        arrowEase:'easeout'    };})(jQuery);
5 ответов

Можно вот так например:
<div style="width:210px"><div style=" width:100px; height:200px; border:1px solid #0033CC; float:right"></div><div style=" width:100px; height:200px; border:1px solid #0033CC; float:left"></div></div>
или вот так, но тогда div превратится в span
<div style="width:210px"><div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div><div style=" width:100px; height:200px; border:1px solid #0033CC; display:inline;"></div></div>


Так я сам могу.Я именно в этом примере разобраться не могу.


Измененные CSS блоки:
 .gvIIContainer{        width:600px; /* здесь ширину подходящую, чтобы 2-е колонки влезли*/        position:relative;        background:#000;        padding:5px 0 5px 5px;        /*border:10px solid #fff;*/    }    .gvIIContainer .gvIIImgContainer{        width:490px;        height:385px;float: left; /*<---*/    }    }    .gvIIContainer .gvIIHolder{        position:relative;        height:490px;        width:140px; /*ширина div превью*/        overflow:auto;float: left; /*<---*/    }


DE20, всё равно хрен знает что получается.Может как-то сам скрипт разделить, на отдельные дивы, а их уже по ячейкам таблицы раскидать?


armor85, не переношу топик в вёрстку только потому, что контент генеришь используя jQuery. Вопрос же по сути чисто по вёрстке. Лучше всего использовать таблицу.Как вариант float: left предложенный DE20, но помни, такие плавающие слои не задают высоту родительскому div'у, тот попросту схлопнеться если ничего кроме плавающих слоёв в нём нет. Оба слоя налезут тогда на всё, что идёт дальше. Что бы это предотвратить, нужно поставить высоту .gvIIContainer{ height: 490px; }