Log in

View Full Version : Put two DIVs side by side while keeping the image vertically centered


Rain Lover
07-14-2012, 02:56 PM
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
coothead
07-14-2012, 07:31 PM
Hi there Mike,

check out the attachment, it may provide you with some mild amusement. ;)

coothead
Rain Lover
07-15-2012, 04:31 AM
Hi there Mike,

check out the attachment, it may provide you with some mild amusement. ;)

coothead

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! :)
coothead
07-15-2012, 08:23 AM
Hi there Rain Lover,

captions were not mentioned in you original post, so I did not create captions. ;)

What I gave you was just an example.

Check out the attachment, which now has captions and accommodates various image dimensions. :)

coothead
Rain Lover
07-15-2012, 09:47 AM
Hi there Rain Lover,

captions were not mentioned in you original post, so I did not create captions. ;)

What I gave you was just an example.

Check out the attachment, which now has captions and accommodates various image dimensions. :)

coothead

Much better! Is there a way to put the caption right under the large image with a padding of 5px?
coothead
07-16-2012, 11:00 AM
Hi there Rain Lover,

Is there a way to put the caption right under the large image with a padding of 5px?
No, not possible.

I have given you a simple CSS solution to your problem, as you posted it in the CSS forum.

A more complicated javascript solution is, obviously, possible.

But is that the route that you wish to take?

coothead
Rain Lover
07-16-2012, 12:03 PM
Hi there Rain Lover,

No, not possible.

I have given you a simple CSS solution to your problem, as you posted it in the CSS forum.

A more complicated javascript solution is, obviously, possible.

But is that the route that you wish to take?

coothead

Dear coothead,

I've already gotten your kind help on a similar image gallery. Thank you so much for the continuous help and the beautiful viewers you created on this post. :)