homepage Welcome to WebmasterWorld Guest from 54.161.175.231
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4475634
 3:17 pm on Jul 14, 2012 (gmt 0)

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

 

Paul_o_b




msg:4475884
 7:26 pm on Jul 15, 2012 (gmt 0)

Hi,

Assuming you don't want to change the html and also assuming that you don't care about less than IE8 (as you have used display:table-cell) then you could do it like this:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:448px;
height:336px;
line-height:336px;
background:black;
text-align:center;
}
#left img {
display:inline;
vertical-align:middle;
}
#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>


Rain_Lover




msg:4475893
 7:55 pm on Jul 15, 2012 (gmt 0)

I'm really happy you finally showed up! Hope you had a great holiday! :)

If you remember we already discussed a similar image gallery where the large image appeared in the background. I had no problem centering the background image. But in this new gallery, the large image is a real HTML element as I want to put a caption under each large image and I couldn't do it with a background image.
Your solution has a little problem: the image isn't completely vertically centered. If you pay attention, it's closer to the bottom and further than the top of the container.

Rain_Lover




msg:4475895
 7:57 pm on Jul 15, 2012 (gmt 0)

Assuming you don't want to change the html


Yes. I'd prefer not to add HTML elements, but If it's a must, then why not?

Paul_o_b




msg:4475989
 8:22 am on Jul 16, 2012 (gmt 0)

Yes had a good holiday thanks.

If you don;t mind changing the html then the best option is to just add a wrapper like this:


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left{float:left}
#left span{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"><span><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></span></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>


That should avoid the alignment problem of the other method.

Rain_Lover




msg:4476007
 10:01 am on Jul 16, 2012 (gmt 0)

Thanks a lot! :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved