The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Put two DIVs side by side while keeping the image vertically centered
RainLover
post Jul 14 2012, 09:59 AM
Post #1


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 14 2012, 12:12 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You can use margin:18px auto 0; on #left img.

Have look here too: http://css-discuss.incutio.com/wiki/Centering_An_Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 14 2012, 12:47 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
"vertical-align" only applies to elements with "display: table-cell" or -"inline".

Making both DIVs "display: table-cell" (with no float) should be the easiest solution, but older MSIE browsers don't support it.

If you prefer to float the DIVs they can't remain as "display: table-cell", but instead you can give the inline image vertical alignment with the help of an extra spacer image:

CODE
div {float: left;}

#left {
width:448px;
height:336px;
text-align: center;
}

#left #spacer {
height: 336px;
width: 1px;
vertical-align: middle;
}

<div id="left">
<img src="" alt="" id="spacer">
<img src="" alt="">
</div>

You can use a SPAN instead of the spacer image, but then you also need to make it "display: inline-block", which older Firefox/Gecko browsers don't support.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 14 2012, 12:48 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Frederiek @ Jul 14 2012, 07:12 PM) *

You can use margin:18px auto 0; on #left img.

How would that work? Shouldn't you use much more top and bottom margin? unsure.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 15 2012, 12:06 AM
Post #5


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Jul 14 2012, 12:47 PM) *

Making both DIVs "display: table-cell" (with no float) should be the easiest solution, but older MSIE browsers don't support it.


I design for IE8+.

QUOTE
If you prefer to float the DIVs they can't remain as "display: table-cell", but instead you can give the inline image vertical alignment with the help of an extra spacer image


I can't get it to work:
http://jsfiddle.net/yH8rA/1/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 15 2012, 03:41 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
QUOTE(Christian J @ Jul 14 2012, 07:48 PM) *

QUOTE(Frederiek @ Jul 14 2012, 07:12 PM) *

You can use margin:18px auto 0; on #left img.

How would that work? Shouldn't you use much more top and bottom margin? unsure.gif

No. The #left div has a height of 336px and the image is 300px high. That leaves 36px of space left, divided by 2 makes 18px.
With that, you don't need the extra markup for a spacer image.

Below, the modified (and commented) file from jsfiddle, which works for me in Safari/Mac. I haven't tried in IE as I don't have access to an IE.
CODE
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {float: left;}
#left {width:448px; height:336px; text-align: center; background:black;}
/* #left #spacer {height: 336px; width: 1px; vertical-align: middle;} NOTE, width and height are in reversed order */
#left img {display:block; margin: 18px auto;} /* or margin: 18px auto 0; */
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left">
<!-- <img src="" alt="" id="spacer"> NOTE, src shouldn't be empty, but contain a transparent image file -->
<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>​​
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 15 2012, 03:46 AM
Post #7


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Frederiek @ Jul 15 2012, 03:41 AM) *

The #left div has a height of 336px and the image is 300px high. That leaves 36px of space left, divided by 2 makes 18px.


Thanks for the answer, but adding a top and bottom margin to the image doesn't resolve the issue as the large image height isn't fixed. It's an image gallery where clicking any thumbnail displays a different image with a different size in the left division
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jul 15 2012, 05:46 AM
Post #8


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9
You hadn't said before the images will not be the same size.

Have you taken a look at the two links from http://css-discuss.incutio.com/wiki/Centering_An_Image ? Do the included samples there work for you?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 15 2012, 06:44 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(RainLover @ Jul 15 2012, 07:06 AM) *

I design for IE8+.

Then "display: table-cell" should be fine.

QUOTE
I can't get it to work:
http://jsfiddle.net/yH8rA/1/

Oops, you need to remove this part also:

CODE
#left img {display:block; margin:0 auto;}

(the "display: block" is what's causing trouble, also the margin is no longer needed).

You also need to make the preview window wide enough for the two floated DIVs to fit side by side.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 15 2012, 06:48 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(Frederiek @ Jul 15 2012, 10:41 AM) *

QUOTE(Christian J @ Jul 14 2012, 07:48 PM) *

How would that work? Shouldn't you use much more top and bottom margin? unsure.gif

No. The #left div has a height of 336px and the image is 300px high.

I see. I never looked at the actual image file. blush.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 15 2012, 09:12 AM
Post #11


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Jul 15 2012, 06:44 AM) *


Oops, you need to remove this part also:

CODE
#left img {display:block; margin:0 auto;}

(the "display: block" is what's causing trouble, also the margin is no longer needed).


I tried it to no luck:
http://jsfiddle.net/yH8rA/5/

The image isn't vertically centered.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 15 2012, 09:18 AM
Post #12


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Frederiek @ Jul 15 2012, 05:46 AM) *

Have you taken a look at the two links from http://css-discuss.incutio.com/wiki/Centering_An_Image ? Do the included samples there work for you?


Yes: it's a fairly complicated workaround to support older browsers.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 15 2012, 12:43 PM
Post #13


.
********

Group: WDG Moderators
Posts: 9,656
Joined: 10-August 06
Member No.: 7
QUOTE(RainLover @ Jul 15 2012, 04:12 PM) *

I tried it to no luck:
http://jsfiddle.net/yH8rA/5/

The image isn't vertically centered.

Oops again, seems both images need to be vertically centered:

CODE
#left #spacer {
vertical-align: middle;
height: 336px;
width: 1px;
}

#left #pic {
vertical-align: middle;
max-width: 400px;
max-height: 330px;
}

<div id="left">
<img src="foo.jpg" alt="" id="spacer">
<img src="bar.jpg" alt="" id="pic">
</div>

Note that the spacer image needs a valid URL, otherwise Firefox will collapse its dimensions. Also, if the large image in the left DIV is too large the layout may fall apart. Perhaps giving it some max-height/width will help.

The "display: table-cell" method seems both simpler and more fluid...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 15 2012, 01:01 PM
Post #14


Advanced Member
****

Group: Members
Posts: 216
Joined: 16-November 09
Member No.: 10,346
QUOTE(Christian J @ Jul 15 2012, 12:43 PM) *

The "display: table-cell" method seems both simpler and more fluid...


Thanks, Christian! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 24th April 2024 - 12:53 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC