Bottom Align to Div

6 replies [Last post]

Mon, 2010-03-08 20:24

KristyKay

Offline

newbie

Timezone: GMT-5

Joined: 2010-03-08

Posts: 4

Points: 5

I'm trying to convert a table to CSS and am having an issue. Basically, I'd like to reproduce the behaviour of vertical-align in a table. If you look at my code, I want the blue boxes (div gItem, comparable to a table cell) to be at the bottom of the red boxes (div galleryRow, comparable to a table row). The only way I've been able to figure out how to do it is to specify an absolute position in gItem with bottom of 0 and a relative position in galleryRow with a specified height. Unfortunately specifying a height won't work for me because gItem is being populated from a database and the height of the image can vary.

Does anyone have an answer or suggestions? If I'm going about this the wrong way, please let me know.

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
<!--
/*
-------------------------------------------------
  Already exists
-------------------------------------------------
*/
 
.galleryHeading         {
	text-align: center;
	width: 100%;
	padding-bottom: 0.5em;
	vertical-align: middle;
	border:0px purple solid;
 
}
 
.galleryHeading   h1, .galleryHeading  form, .detailsText form {
	display: inline;
 
}
 
.galleryHeading h1 {
	vertical-align: top;
}
 
 
/*
-------------------------------------------------
   New
-------------------------------------------------
*/
 
.gallery { 
          margin: 0px;
          width: 100%;
          border: 1px green solid;
          padding: 0px;
	  float: left;
position: relative;
}
 
.galleryRow { 
          margin: 0px;
	  margin-bottom: 15px;
          width: 100%;
          padding: 0px;
	  border: 1px red solid;
	  float: left;
	  position: relative;
	  /*height: 300px;*/
}
 
 
.gItem {
          border: 1px blue solid;
          padding: 5px;
          margin: 0px;
          text-align: center;
  	  float: left;
	/*position: absolute;*/
	/*bottom: 0px*/
}
 
 
.gItemLink {
         padding-top: 0px;
}
 
-->
</style>
</head>
 
<body>
 
<div class="gallery">
 
<div class="galleryHeading"><h1>Mixed Media - Welded Metal</h1> &nbsp;&nbsp;
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="business" value="HeatherHarrisArt@aol.com" />
<input type="image" src="http://www.heatherharrisart.com/images/ViewCart.gif" name="submit" alt="Make payments with PayPal - it's fast, free 
 
and secure!" />
<input type="hidden" name="shopping_url" value="http://www.heatherharrisart.com/gallery.php?sid=3&amp;page=1" />
<input type="hidden" name="display" value="1" />
</form>
</div> <!-- end of galleryHeading -->
 
<p>Seems to be impossible to vertically align gItem (blue boxes) to bottom of galleryRow (red boxes) with CSS without having to define a 
 
height.</p>
 
<div class="galleryRow">
  <div class="gItem" style="width:32%;left:0%">
    <div class="gItemImage"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/EverchangingSkyline_small.jpg" 
 
alt="Everchanging Skydivne" height="144" width="180" border="0" /></a></div>
    <div class="gItemTitle">Everchanging Skyline <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">12" x 21" x 1" (10 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=285">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
 
  <div class="gItem" style="width:32%;left:32%">
    <div class="gItemImage"><a href="/details.php?id=287" onmouseover="window.status='Over The Pennybacker Bridge';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/OverThePennybackerBridge_small.jpg" 
 
alt="Over The Pennybacker Bridge" height="145" width="180" border="0" /></a></div>
    <div class="gItemTitle">Over The Pennybacker Bridge <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">17" x 21" x 1" (10 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=287">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=287" onmouseover="window.status='Over The Pennybacker Bridge';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
 
  <div class="gItem" style="width:32%;left:64%">
    <div class="gItemImage"><a href="/details.php?id=279" onmouseover="window.status='Crossing the Golden Gate';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/CrossingTheGoldenGate_small.jpg" 
 
alt="Crossing the Golden Gate" height="180" width="140.25974026" border="0" /></a></div>
    <div class="gItemTitle">Crossing the Golden Gate <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">27" x 21" x 1" (15 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=279">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=279" onmouseover="window.status='Crossing the Golden Gate';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
</div> <!-- end of galleryRow -->
 
<div class="galleryRow">
  <div class="gItem" style="width:32%;left:0%">
    <div class="gItemImage"><a href="/details.php?id=279" onmouseover="window.status='Crossing the Golden Gate';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/CrossingTheGoldenGate_small.jpg" 
 
alt="Crossing the Golden Gate" height="180" width="140.25974026" border="0" /></a></div>
    <div class="gItemTitle">Crossing the Golden Gate <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">27" x 21" x 1" (15 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=279">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=279" onmouseover="window.status='Crossing the Golden Gate';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
 
  <div class="gItem" style="width:32%;left:32%">
    <div class="gItemImage"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/EverchangingSkyline_small.jpg" 
 
alt="Everchanging Skydivne" height="144" width="180" border="0" /></a></div>
    <div class="gItemTitle">Everchanging Skyline <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">12" x 21" x 1" (10 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=285">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
 
  <div class="gItem" style="width:32%;left:64%">
    <div class="gItemImage"><a href="/details.php?id=287" onmouseover="window.status='Over The Pennybacker Bridge';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/OverThePennybackerBridge_small.jpg" 
 
alt="Over The Pennybacker Bridge" height="145" width="180" border="0" /></a></div>
    <div class="gItemTitle">Over The Pennybacker Bridge <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">17" x 21" x 1" (10 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=287">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=287" onmouseover="window.status='Over The Pennybacker Bridge';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
</div> <!-- end of galleryRow -->
 
 
<div class="galleryRow">
  <div class="gItem" style="width:32%;left:0%">
    <div class="gItemImage"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;"><img src="http://www.heatherharrisart.com/images/mixed_media/EverchangingSkyline_small.jpg" 
 
alt="Everchanging Skydivne" height="144" width="180" border="0" /></a></div>
    <div class="gItemTitle">Everchanging Skyline <img src="http://www.heatherharrisart.com/images/new_icon.gif" alt="new" /></div>
    <div class="gItemMedium">Mixed Media</div>
    <div class="gItemSize">12" x 21" x 1" (10 lbs)</div>
    <div class="gItemStatus"><a href="/misc_pages/price_inquiry.php?id=285">Price Inquiry</a></div>
    <div class="gItemLink"><a href="/details.php?id=285" onmouseover="window.status='Everchanging Skyline';return true;" 
 
onmouseout="window.status='';return true;">Details</a></div>
  </div>
 
 
</div> <!-- end of galleryRow -->
 
</div> <!-- end of gallery -->
 
</body>
</html>

Tags:

CSS Layouts

Mon, 2010-03-08 21:36

KristyKay

Offline

newbie

Timezone: GMT-5

Joined: 2010-03-08

Posts: 4

Points: 5

And even though I forgot to

And even though I forgot to add the DTD to the beginning of the HTML file, I did go back and add it and it made no difference. Just wanted to add that.

Tue, 2010-03-09 02:55

Deuce

Offline

Guru

Timezone: GMT-6

Joined: 2005-11-20

Posts: 4416

Points: 1835

If you data is tabular (you

If you data is tabular (you would put it in Excel) then put it in a table.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Tue, 2010-03-09 07:56

Sarang Ubale

Offline

newbie

Timezone: GMT+5.5

Joined: 2009-02-02

Posts: 6

Points: 7

Alternate solution

Hi Kristy,
My suggestion is better to fix the height of the blue boxes for max height of image.

OR try this if you are not using IE6 Browser:

.gItem {
border: 1px blue solid;
padding: 5px;
margin: 0px;
text-align: center;
float: left;
min-height:300px;
width:32%;

/*position: absolute;*/
/*bottom: 0px*/
}

Remove all inline css like style="width:32%;left:32%"

I think it would be fix your issue.

Regards,
Sarang

Tue, 2010-03-09 13:31

KristyKay

Offline

newbie

Timezone: GMT-5

Joined: 2010-03-08

Posts: 4

Points: 5

Sarang Ubale wrote: Hi

Sarang Ubale wrote:

Hi Kristy,
Remove all inline css like style="width:32%;left:32%"

I had to use inline styles because it's a database driven page and the number of "rows" and "columns" are dynamic so I can't put the styles into the external stylesheet. The width will be calculated when the page loads and can vary depending on how many "columns" there are.

Wed, 2010-03-10 07:28

Sarang Ubale

Offline

newbie

Timezone: GMT+5.5

Joined: 2009-02-02

Posts: 6

Points: 7

Ok then no probs. So did you

Ok then no probs.
So did you use min-height for that box? was that worked?
I think there should not have any probs with that.
Try it.

Thu, 2010-03-11 01:03

KristyKay

Offline

newbie

Timezone: GMT-5

Joined: 2010-03-08

Posts: 4

Points: 5

Sarang Ubale wrote: Ok then

Sarang Ubale wrote:

Ok then no probs.
So did you use min-height for that box? was that worked?
I think there should not have any probs with that.
Try it.

I didn't try it. I want something that will work across all/most browsers, including IE6. There are still a lot of IE6 users out there!

And even though I forgot to

If you data is tabular (you

Alternate solution

Sarang Ubale wrote: Hi

Ok then no probs. So did you

Sarang Ubale wrote: Ok then

New forum topics

User login

Navigation