Put two DIVs side by side while keeping the image vertically centered

HTML & CSS
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

2

Wrap the #left div in a container div and float the container instead.

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! :slight_smile:

4

Hi there Mike,

check out the attachment, it may provide you with some mild amusement. :wink:

coothead

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 :slight_smile:

6

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>
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! :slight_smile:

8

Sometimes you need to pick your battles. We’re only talking one extra measly div here. :wink:

9

You’re right. Thank you! :slight_smile:

10