CSS or jQuery - align child div at bottom of parent div?

Hi,
I am trying to align images to be centered and at the bottom of the image container.
What is the best/easiest way to do this?  

Thanks.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.gallery_cont{
	float:left;
	width: 200px;
	height:220px;
	display: block;
	margin: 5px;
}

.gallery_image{
	width: 200px;
	height:200px;
	background-color: #ccc;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


.galleryItemName{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-position: center;
	font-weight: normal;
	color: #900;
	text-align: center;
	line-height: 20px;
	height: 20px;
}

</style>


</head>

<body>

<div class="gallery_cont">
<div class="gallery_image"><img name="" src="" width="160" height="100" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 1</div>
</div>

<div class="gallery_cont">
<div class="gallery_image"><img name="" src="" width="180" height="160" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 2</div>
</div>


<div class="gallery_cont">
<div class="gallery_image"><img name="" src="" width="160" height="180" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 3</div>
</div>



</body>
</html>

Open in new window

sabecsAsked:
Who is Participating?
 
Gurvinder Pal SinghCommented:
check this working version too
http://jsfiddle.net/gurvinder372/vTe8z/
0
 
GreggCommented:
Take a look at css. you can simplify and not use so many div tags. I didnt test in cross browsers, using linux and i only got ff on this machine. ...im ok with that. please verify it works. :-)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

/**
 * Set the gallery div as relative container for img and p tags
 * In this case, position is relative.
 * Set margin bottom to push other content down to account for image text.
 */
.gallery {
   position: relative;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   background: #ccc;
   margin-bottom: 25px;
}

/**
 * set absolute positioning, set to bottom alignment.
 * push to the left 50%, if images are 160px wide, bring them back 80px
 * to center the image.
 */
.gallery img {
   position: absolute;
   bottom: 0;
   left: 50%;
   margin-left: -80px;
}

/**
 * Set the abs positioning as well. push to left 50%, set the width to same
 * size as the container. Then push back 1/2 the width to center the text.
 * push the text below the container 35px using negative spacing.
 */
.gallery p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #900;
   text-align: center;
   line-height: 20px;
   height: 20px;
   position: absolute;
   left: 50%;
   width: 200px;
   margin-left: -100px;
   bottom: -35px;
}

</style>


</head>

<body>


<div class="gallery">
	<img src="" width="160" height="100" alt="" style="background-color: #0066CC" />
        <p>Image 1</p>
</div>

</body>
</html>

Open in new window

0
 
Kiran SonawaneProject LeadCommented:
Check this (tested)
Test page : http://jsfiddle.net/rcP7e/

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.gallery_cont{
  float:left;
  width: 200px;
  height:220px;
  display: block;
  margin: 5px;
}

.gallery_image{
  width: 200px;
  height:200px;
  background-color: #ccc;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  _position: absolute; _top: 50%; 
  display: table-cell; 
  vertical-align: middle;
}



.galleryItemName{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-position: center;
  font-weight: normal;
  color: #900;
  text-align: center;
  line-height: 20px;
  height: 20px;
}

</style>


</head>

<body>

<div class="gallery_cont">
<div class="gallery_image" align="center"><img name="" src="" width="160" height="100" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 1</div>
</div>

<div class="gallery_cont">
<div class="gallery_image" align="center"><img name="" src="" width="180" height="160" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 2</div>
</div>


<div class="gallery_cont">
<div class="gallery_image" align="center" ><img name="" src="" width="160" height="180" alt="" style="background-color: #0066CC" /></div>
<div class="galleryItemName">Image 3</div>
</div>



</body>
</html>

Open in new window

0
 
wilson1000Commented:
Try this:

In you CSS: set your parent div (gallery_cont) relative like this :
    position : relative ;

And then....

Set the child div (galleryItemName) absolute, like this :
    position : absolute ;
    bottom : 0 ;

You don't have to do anything else to align an element to the bottom of a parent container.

Please use valid CSS: properties beginning with underscore's are not standard CSS implementation.
0
 
sabecsAuthor Commented:
Thanks gurvinder372, its perfect.
I tried all other suggestions but could not get it to work accros major browsers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.