Results 1 to 7 of 7

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

  1. #1
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

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

    Hi,

    Sample:

    Code:
    <!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. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there Mike,

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

    coothead
    Last edited by coothead; 07-14-2012 at 10:43 PM. Reason: edited zip file

  3. #3
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by coothead View Post
    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!

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  5. #5
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by coothead View Post
    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?

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    693
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    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

  7. The Following User Says Thank You to coothead For This Useful Post:

    Rain Lover (07-16-2012)

  8. #7
    Join Date
    Nov 2009
    Posts
    211
    Thanks
    40
    Thanked 1 Time in 1 Post

    Thumbs up

    Quote Originally Posted by coothead View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •