[SOLVED] ColorBox doesn't Change Width Dynamically

ColorBox doesn't Change Width Dynamically

I am using Jquery colorbox plugin at my HTML application. There are two divs at my page. One is at left and one is at right. I want that. At the beginning right div's display is none. When I click somewhere at my left div right div's display becomes block. However because of the size of colorbox place second div display's under first div and a scrollbar appears. I don't want that I want it to locate at right I mean I want colorbox to calculate its width again automatically (If possible I don't want to declare a width to fix it)

PS 1: My left and right div's css':

.left {
    float: left;
    display: inline;
}

.right {
    float: right;
    display: inline;
}

When I don't hide (I use Jquery .show()) second div(right div):

one of is at right other at left.

However when I hide (I use Jquery .hide()) second and after I show it (I do $.colorbox.resize();) my second div appears at bottom of first one(not at right).

PS 2: I get my colorbox content from an external file

Solution

colorbox changes its height automatically but doesn't change width. So I did that:

$.colorbox.resize({width: pixelValue});