Mori
July 14, 2012, 3:14pm
1
Hi,
Sample:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}
#left img {display:block; margin:0 auto;}
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div>
<div id="right">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
If I use div {float:left;} , the large image won’t be vertically centered any more. What’s the solution?
Many thanks in advance!
Mike
ralphm
July 14, 2012, 4:04pm
2
Wrap the #left div in a container div and float the container instead.
Mori
July 14, 2012, 6:56pm
3
That’s what I thought at first and wondered if there was a way to achieve what I’m after without adding another HTML element. Thanks anyway!
Hi there Mike,
check out the attachment, it may provide you with some mild amusement.
coothead
ronpat
July 14, 2012, 8:17pm
5
Noted the table-cell in RL’s post. Added a little markup and came up with this floatless approach.
Comments?
<!DOCTYPE html>
<html>
<!--
This scheme assumes that the larger image will always fit into the allotted space.
-->
<head>
<title></title>
<style type="text/css">
.outer {
display:table;
background:black;
}
#left,
#right {
display:table-cell;
vertical-align:middle;
}
#left {
width:448px;
padding:5px 0;
}
#right {
width:97px;
padding:5px 5px 5px 0;
}
img {
display:block;
margin:0 auto;
}
a + a img {
margin-top:5px; /* OK, so I added space between thumbs :-) */
}
.wrapper {
background:black;
height:320px; /* height of object conforms to this setting */
overflow-x:hidden;
overflow-y:auto;
}
</style>
</head>
<body>
<div class="outer">
<div id="left">
<img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt="">
</div>
<div id="right">
<div class="wrapper">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</div>
</div>
</body>
</html>
EDIT:
Never mind… I see that avoiding added markup was your objective
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Missing title to go here</title>
<style type="text/css">
img {float:right; clear:right; margin:15px; border:0;}
div {width:555px; height:300px; overflow:auto;
background:#333 url(http://dl.dropbox.com/u/4017788/Labs/image2.jpg) no-repeat;
}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt="" /></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt="" /></a>
</div>
</body>
</html>
Mori
July 15, 2012, 4:28am
7
VERY beautiful! However, I don’t want to put the large image in the background as each large image has a different size and under each one I’m going to put a caption.
Thanks a lot anyway!
ralphm
July 15, 2012, 7:21am
8
Sometimes you need to pick your battles. We’re only talking one extra measly div here.