?
Solved

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

Posted on 2011-10-19
5
Medium Priority
?
740 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:sabecs
5 Comments
 
LVL 10

Expert Comment

by:Gregg
ID: 36997293
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36997848
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 36998333
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
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 36998517
check this working version too
http://jsfiddle.net/gurvinder372/vTe8z/
0
 

Author Closing Comment

by:sabecs
ID: 36998613
Thanks gurvinder372, its perfect.
I tried all other suggestions but could not get it to work accros major browsers.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question