rollover image gallery - part 3

[Abby]

After all this time, I still have trouble with floats.In my life drawing gallery (warning: nude drawings, may not be work safe), I'd like to display one large image next to an image gallery of thumbnails. I've floated the large image, but no matter what I do, the thumbnails wrap below it, since they are also floated. This creates an ugly design.I want the thumbnails to stay close together. It stands to reason that either the large image or the thumbnail gallery needs to be inside its own container, but nothing I do seems to work. How can I solve this problem? Here's the relevant CSS:

.gallerycontainer {  background:transparent url('../images/bg/cyanfade.png') repeat-x bottom left;  height:640px;  margin-left:150px;  margin-right:8px;}img.nude {width:630px; height:635px; float:left; clear:both;}.highslide-gallery .highslide-active-anchor img {	border-color: black;	visibility: visible;	cursor: default;}.highslide-gallery ul {	list-style-type: none;	margin: 0;	padding: 0;}.highslide-gallery ul li {	display: block;	position: relative;	float: left;	width: 106px;	height: 106px;	border: 1px solid silver;	background: #ededed;	margin: 2px;	line-height: 0;	overflow: hidden;}.highslide-gallery ul a {	position: absolute;	top: 50%;	left: 50%;}.highslide-gallery ul img { 	position: relative;	top: -50%;	left: -50%;}html>/**/body .highslide-gallery ul li {	display: table;	text-align: center;}html>/**/body .highslide-gallery ul li {	text-align: center;}html>/**/body .highslide-gallery ul a {	position: static;	display: table-cell;	vertical-align: middle;}html>/**/body .highslide-gallery ul img {	position: static;}.highslide-gallery ul li {	width: 106px;	height: 106px;	border: 1px solid #00cc66;	background: #bbeecc;	margin: 2px;}

And the HTML:

<div class="highslide-gallery gallerycontainer"><img class="nude" src="images/life_drawing_006.jpg"  alt="large image" title="large image">	<ul>	<li>	<a href="images/life_drawing_001.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_001.jpg"  alt="Life drawing 1" title="Life drawing 1">	</a>	<li>	<a href="images/life_drawing_002.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_002.jpg"  alt="Life drawing 2" title="Life drawing 2">	</a>	<li>	<a href="images/life_drawing_003.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_003.jpg"  alt="Life drawing 3" title="Life drawing 3">	</a>	<li>	<a href="images/life_drawing_004.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_004.jpg"  alt="Life drawing 4" title="Life drawing 4">	</a></ul><div style="clear:both"></div><ul>	<li>	<a href="images/life_drawing_005.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_005.jpg"  alt="Life drawing 5" title="Life drawing 5">	</a>	<li>	<a href="images/life_drawing_007.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_007.jpg"  alt="Life drawing 7" title="Life drawing 7">	</a>	<li>	<a href="images/life_drawing_008.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_008.jpg"  alt="Life drawing 8" title="Life drawing 8">	</a>	<li>	<a href="images/life_drawing_009.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_009.jpg"  alt="Life drawing 9" title="Life drawing 9">	</a></ul><div style="clear:both"></div><ul>	<li>	<a href="images/life_drawing_010.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_010.jpg"  alt="Life drawing 10" title="Life drawing 10">	</a>	<li>	<a href="images/life_drawing_011.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_011.jpg"  alt="Life drawing 11" title="Life drawing 11">	</a>	<li>	<a href="images/life_drawing_012.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_012.jpg"  alt="Life drawing 12" title="Life drawing 12">	</a>	<li>	<a href="images/life_drawing_013.jpg" class="highslide" 			onclick="return hs.expand(this, config1 )">		<img src="thumbs/life_drawing_013.jpg"  alt="Life drawing 13" title="Life drawing 13">	</a></ul>	<div style="clear:both"></div></div>

Thanks for any advice.

[ieuan11]

.gallerycontainer {background:transparent url('../images/bg/cyanfade.png') repeat-x bottom left;height:640px;width:870px;margin-left:auto;margin-right:auto;}img.nude {width:630px; height:635px; float:left; clear:both;}.highslide-gallery .highslide-active-anchor img {border-color: black;visibility: visible;cursor: default;}.highslide-gallery ul {list-style-type: none;margin: 0;padding: 0;}.highslide-gallery ul li {display: block;position: relative;float: right;width: 106px;height: 106px;border: 1px solid silver;background: #ededed;margin: 2px;line-height: 0;overflow: hidden;}.highslide-gallery ul a {position: absolute;top: 50%;left: 50%;}.highslide-gallery ul img {position: relative;top: -50%;left: -50%;}html>/**/body .highslide-gallery ul li {display: table;text-align: center;}html>/**/body .highslide-gallery ul li {text-align: center;}html>/**/body .highslide-gallery ul a {position: static;display: table-cell;vertical-align: middle;}html>/**/body .highslide-gallery ul img {position: static;}.highslide-gallery ul li {width: 106px;height: 106px;border: 1px solid #00cc66;background: #bbeecc;margin: 2px;}

<div class="highslide-gallery gallerycontainer"><img class="nude" src="images/life_drawing_006.jpg" alt="large image" title="large image"><ul><li><a href="images/life_drawing_001.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_001.jpg" alt="Life drawing 1" title="Life drawing 1"></a><li><a href="images/life_drawing_002.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_002.jpg" alt="Life drawing 2" title="Life drawing 2"></a><li><a href="images/life_drawing_002.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_002.jpg" alt="Life drawing 2" title="Life drawing 2"></a><li><a href="images/life_drawing_002.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_002.jpg" alt="Life drawing 2" title="Life drawing 2"></a><li><a href="images/life_drawing_003.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_003.jpg" alt="Life drawing 3" title="Life drawing 3"></a><li><a href="images/life_drawing_004.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"></a><li><a href="images/life_drawing_004.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"></a><li><a href="images/life_drawing_004.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"></a><li><a href="images/life_drawing_004.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"></a><li><a href="images/life_drawing_004.jpg" class="highslide"onclick="return hs.expand(this, config1 )"><img src="thumbs/life_drawing_004.jpg" alt="Life drawing 4" title="Life drawing 4"></a></ul></ul></ul><div style="clear:both"></div><div style="clear:both"></div><div style="clear:both"></div></div>

[dsonesuk]

1) the floated element in this case your large image should placed above non floated elements.2) the non floated container/s should not use clear: both, as this prevent the container/thumbnail images positioning themselves beside the larger image.3) use left margin (approx margin:0 0 0 637px;) on non floated elements to force the left edge to the right edge of large image, your display area should now be from large image to left most edge of screen.4) adjust width of .gallerycontainer to required width to match that of pale green top bar, or leave for fluid width to adjust to screen size.the images should now start to appear beside the large image, but

[Abby]

Neither suggestion is ideal.

1) the floated element in this case your large image should placed above non floated elements.

What elements are non floated? The thumbnail gallery li are all floated left (and floating them right or widening the margin doesn't help).I took out the clear:both divs in the thumbnail gallery, and you can see the result on my updated page here. In my browser, the thumbnails wrap strangely. I would like to limit them to four thumbnails per row, to prevent the poor layout when it wraps to the next line. That's why I placed the clear:both divs between every four thumbnails. A simple <br> doesn't work. Since clear:both divs doesn't work either ... is there any way to do this?Also, I wonder if the thumbnails would wrap better if they were all 100x100 instead of varying heights. Is there a way to make them all 100px x 100px in the code, or would I have to process them all through Photoshop?

[dsonesuk]

the non floated element is the ul that the li and images are within.

I took out the clear:both divs in the thumbnail gallery, and you can see the result on my updated page here. In my browser, the thumbnails wrap strangely. I would like to limit them to four thumbnails per row, to prevent the poor layout when it wraps to the next line. That's why I placed the clear:both divs between every four thumbnails. A simple <br> doesn't work. Since clear:both divs doesn't work either ... is there any way to do this?Also, I wonder if the thumbnails would wrap better if they were all 100x100 instead of varying heights. Is there a way to make them all 100px x 100px in the code, or would I have to process them all through Photoshop?

instead of four per row, which will never look right because of the wider images, why not go for three per row, which will take three wide images in a row, and the smaller image won't have any problem with wider images mixed within the row, and the layout wouldn't look so poor.example try below, may need adjusting for different browsers.highslide-gallery ul li {height:100px; width: 15.43%}.highslide img {height:95px;}

[Abby]

the non floated element is the ul that the li and images are within.instead of four per row, which will never look right because of the wider images, why not go for three per row, which will take three wide images in a row, and the smaller image won't have any problem with wider images mixed within the row, and the layout wouldn't look so poor.example try below, may need adjusting for different browsers.highslide-gallery ul li {height:100px; width: 15.43%}.highslide img {height:95px;}

I'm afraid I don't understand. Changing these sizes doesn't limit the images to three per row. How would I do that? When I constrain the .highslide img to a specific height, some of the thumbnails become blurry, since the image files are varying heights. But at least giving them a uniform height makes them fall into line instead of wrapping in crazy rows. I guess I can go through the actual images and re-save them to all have the same height. Thanks!EDIT: I found a quicker work-around, and I just hope it works in all browsers. I set a max-height for the img, and set a ul li height that comfortably fits four rows next to the large image.

.highslide img {	border: 2px solid silver;	max-height:146px;}.highslide-gallery ul li {	width: 106px;	height: 150px;	border: 1px solid #00cc66;	background: #bbeecc;	margin: 2px;}