Utilizing the Jquery plugin called colorbox in my HTML application has presented me with a challenge. I have two divs on my page – one positioned at the left and the other at the right. What I desire is for the right div to initially have its display set to none. Then, when I click anywhere within the left div, I want the right div's display to change to block. The issue arises when the size of the colorbox results in the second div being displayed below the first, accompanied by an unwelcome scrollbar. My preference would be for the right div to align to the right side, effectively having colorbox automatically recalculate its width (ideally without specifying a fixed width).
PS 1: The CSS for my left and right divs is as follows:
.left {
float: left;
display: inline;
}
.right {
float: right;
display: inline;
}
Without hiding the second div (utilizing Jquery .show()):
one of them is on the right, while the other is on the left.
However, upon hiding the second div (using Jquery .hide()) and subsequently showing it again (performing $.colorbox.resize();), the second div ends up appearing beneath the first rather than aligned to the right.
PS 2: The content for my colorbox is retrieved from an external file.