Link to home
Start Free TrialLog in
Avatar of CWS (haripriya)
CWS (haripriya)Flag for India

asked on

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
Avatar of sunithnair
sunithnair

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

Open in new window

Avatar of CWS (haripriya)

ASKER

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.
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

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
You have align center change it to align: left....This should do.

MD
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.
Can you please post a link to the page where I can take a look at if possible?
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
@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.
thanks for you time, ee needs lot of experts like you :)