how to bring the second div on the same line of the first div

I downloaded a image gallery script which dislays a big image in the middle and the thumbnail images below the big image. The decription of the image is displayed in a seperate div just below the big image. Now, the description is going to be bigger, so I want that div to come next to the big image, how to do this.

I am attaching the screen shots, code snippets of the index.php page, css and js files.

Any help is appreciated
Thanks

<div id="dhtmlgoodies_slideshow">
<div id="previewPane" align="center" ><br />
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
 
<div id="largeImageCaption"><?=$rs['content']?></div>
</div>
<div id="galleryContainer">
<div id="arrow_left" style="height:60px; background-color:#FFFFFF"><img src="arrow_left.gif" height="68" /></div>
<div id="arrow_right"><img src="arrow_right.gif" height="68" /></div>
<div id="theImages">
<!-- Thumbnails -->
<?	
$imgcnt=0;
while($rs=mysql_fetch_array($query1)){
$imgcnt++;
$fname = $rs['videoname'];
$mysock = getimagesize("ads/". $fname);
$target=150;
$width=$mysock[0];
$height=$mysock[1];
if ($width > $height) { 
$percentage = ($height / $width); 
$width=$target;
$result="width=\"$width\"";
} else { 
$percentage = ($width / $height); 
$height = $target;
$result="height=\"$height\"";
} 
echo "<a href=\"#\" onclick=\"showPreview('ads/".$fname."','".$imgcnt."');return false\"><img src=\"ads/".$fname."\" height=\"70\"></a>";
		} //while
}// if num rows
else{
echo "<br><span class=\"verysmall\">No Picture Gallery.</span><br>";
}
?>
<!-- End thumbnails -->
 
<!-- Image captions -->
<?
mysql_data_seek($query1, 0);
while($rs=mysql_fetch_array($query1)){?>
<div class="imageCaption"><?=$rs['content']?></div>
<? } ?>
<!-- End image captions -->
<div id="slideEnd"></div>
</div> <!-- for "theImages" -->
</div> <!-- for "galleryContainer" -->
</div> <!-- for "dhtmlgoodies_slideshow -->

Open in new window

gallery.jpg
gallery-new.jpg
image-slideshow.css.txt
image-slideshow.js.txt
LVL 16
CWS (haripriya)Asked:
Who is Participating?
 
Mark StegglesConnect With a Mentor Web DeveloperCommented:
Hello cyberwebservice,

All you need to do is change this css, see my additions are left justified:

#previewPane{
            border:1px solid #CCCCCC;
            margin-bottom:10px;      
            text-align:center;
            vertical-align:middle;
            /*padding-top:5px;*/

            position:relative;
            
            /* CSS HACK */
            height: 350px;      /* IE 5.x */
            height/* */:/**/350px;      /* Other browsers */
            height: /**/350px;
                        
      }
      #previewPane img{
float:left;
            line-height:250px;
            border:10px solid #8C8C8C;
      }
      #previewPane #largeImageCaption{      /* CSS styling of image caption below large image */
            font-family: verdana;
            color: #666666;
            font-weight: normal;
            font-size: 8pt;
            text-decoration:none;
position:absolute;
left:500px;
top:100px;
text-align:center;
width:300px
      }
      #galleryContainer{
clear:left;
            height:80px;      /* Height of the images + 2 */
            border:1px solid #CCCCCC;
            position:relative;
            overflow:hidden;
            padding:1px;
            vertical-align:middle;
            
            /* CSS HACK */
            height: 80px;      /* IE 5.x - Added 2 pixels for border left and right */
            height/* */:/**/80px;      /* Other browsers */
            height: /**/80px;
                        
      }


Let me know if it works

Steggs
0
 
sunithnairCommented:
Try this
<div style="display:inline">Your Image</div><div style="display:inline">Your Caption</div>

Open in new window

0
 
CWS (haripriya)Author Commented:
it displays the content by the side, but the previewpane is not upto the size of the gallery. Also, when i click on the images in the gallery, the content again goes to the bottom of the image. something should be done is the css file.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
sunithnairCommented:
Is this how you did it. Replacing 2-6 in your code above
<div id="previewPane" align="center" ><br />
<div style="display:inline">
<img src="ads/<? echo $fname?>" height="200" /> <span id="waitMessage">Loading image. Please wait</span>
</div>
<div style="display:inline">
<div id="largeImageCaption"><?=$rs['content']?></div>
</div>
</div>

Open in new window

0
 
myderrickCommented:
The big image should have a align: left eg <img src="sss.jpg" align="left"/> or withing the div containing the large image add text-align: left.

MD
0
 
myderrickCommented:
You have align center change it to align: left....This should do.

MD
0
 
CWS (haripriya)Author Commented:
please ignore the above Admin comment. I selected it by mistake.

@sunithnair,
No. I gave in the style in the same div tag.
Anyhow, when I tried your code, same results.

@myderrick
Changing the alignment didn't work.
0
 
sunithnairCommented:
Can you please post a link to the page where I can take a look at if possible?
0
 
CWS (haripriya)Author Commented:
@sunithnair,
sorry, I was offline and was trying from scratch with table layouts instead of css. So, I could not give you the link on time. Thanks for your help so far.

@Steggs
it worked perfect!
thanks a lot Steggs.
0
 
CWS (haripriya)Author Commented:
thanks for you time, ee needs lot of experts like you :)
0
 
CWS (haripriya)Author Commented:
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.