Auto Heights

[Hooded_Villian]

I have a little gallery section that I am working on. Each of the Thumbnails will be linked to a CSS made box where the big picture will open up to be viewed. My little problem is this... How do I make the box inherit the size of the big picture, if all WIDTHS of the big pics is 750, but the HEIGHTS vary. The main reason for this is due to the border... I want the border to fit the picture.



<div id="galleryMain">

<h3>Photo Gallery Title:</h3>

<iframe id="galleryBoxFrame" name="content" frameborder="0" scrolling="auto"></iframe>

</div>

<div id="gallerySmall">

<a href="sample contri5/mainPics/placeholder.jpg" target="content" /><img src="sample contri5/thumbs/placeholder.gif" border="0" /></a>

<a href="sample contri5/mainPics/placeholder1.jpg" target="content" /><img src="sample contri5/thumbs/placeholder1.gif" border="0" /></a>

<a href="sample contri5/mainPics/placeholder2.jpg" target="content" /><img src="sample contri5/thumbs/placeholder2.gif" border="0" /></a>

</div>



#galleryMain {
background-color: #FFFFFF;
height: 800px;
width: 800px;
}

#galleryBoxFrame {
border: 1px solid #000000;
width: 750px;
}

[ray326]

You could display the big picture in a div instead of an iframe.

[Hooded_Villian]

And how would I do that?

As I use name="content" for the iFrame and target="content" for the a href=""

[ray326]

Use Javascript and the innerHTML of the div to load the image.

[Hooded_Villian]

So instead of using an iframe, I must go write or find a javascript script? I prefer to use the iframe as its plain html and I want to keep the site as plain html and css based as possible. Thanks...

I just need help to sort out the current setup...

I want the <iframe id="galleryBoxFrame" name="content" frameborder="0" scrolling="auto"></iframe> to inherit the height of the specific picture being opened.

[Centauri]

Here (http://www.cssplay.co.uk/menu/gallery_click2.html) is a non-iframe method.

[Hooded_Villian]

While that look is very nice and I have now decided to change my layout with the small THUMBS to the left and the MAIN PIC to the right, it still doesn't help me with my problem.

Those pics in those examples are of the same size. The only size of my large pics that is the same is the width. I need for my <div> or <iframe id="galleryBoxFrame"> to expand or contract accroding to the heights of each individual image.