Flush/align bottom in a div

I am trying to get a poster layout correct. The page is here:

http://birdmachinedb.worldwontlisten.net/gallery/gallery.php?year=2001&page=1

As you can see, the first poster of the top section is aligned to the top. I'd like to see all of the posters' titles aligned along the bottom. The css for the div is listed below:

div.row1column1 {

position:relative;
width:140px;
height:140px;
float:left;
margin-left:49px;
text-align:left;
font-size: 10px;
color:#666666;
font-family:Arial, Helvetica, sans-serif;
z-index:1;
padding-right: 10px;
word-wrap: break-word;
padding-bottom:0%;
margin-bottom:0%;
}

There are a few redundancies in there due to my testing. If there's anything you guys can see that may help me, please do!

-ryan.

Thanks, Kravvitz. That seems to be exactly what I'm looking for. I've tried to port it over to my site, but I'm having some issues. I was able to get the sample working, but it went back to normal when I filled in my details.

do you mind taking another look at my site? I left the coloring in there to show the gaps in the div's.

css:

#example1 {
position: relative;
width: 720px;
height: 180px;
background-color: #fbc;
background-color: #fdb;
margin-left: 49px;
margin-right: auto;
padding-bottom: 0;
}
#example1 div.alignBottom {
position: absolute;
bottom: 0;
background-color: #f00;
padding:0;
}
#example1 div.alignBottom div {
width: 7em;
background-color: #fbc;
padding-right:10px;
float: left;
text-align:left;
font-size: 10px;
}

<div id="example1"><div class="alignBottom">

<div class="row1column1"><b>dianogah</b><BR><a href="javascript:;" onClick="MM_openBrWindow('detail.php?id=137','','resizable= yes,width=555,height=400')" target="_self">Click for detail & info</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR><IMG SRC="phpThumb/phpThumb.php?src=/poster_images/2001_dianogah_pinebender.jpg&h=120&w=135"></div>

<div class="row1column2"><b>breeders</b><BR><a href="javascript:;" onClick="MM_openBrWindow('detail.php?id=135','','resizable= yes,width=555,height=400')" target="_self">Click for detail & info</A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<BR><IMG SRC="phpThumb/phpThumb.php?src=/poster_images/2001_breeders_1.jpg&h=120&w=135"></div>

<.......>

</div></div>


Please let me know if there's anything you need to know from me about what I did!

Thanks again,
ryan.

You will need to change the selectors for it to work.

Learn CSS.
Adding a touch of style
http://www.cssbasics.com/
Learning CSS
CSS2 Specification
BrainJar.com: Using Style Sheets
www.glish.com/css/
www.w3schools.com/css/default.asp
www.thenoodleincident.com/tutorials/css/


You should use a complete doctype (one that includes a URL).
http://hsivonen.iki.fi/doctype/
http://www.alistapart.com/articles/doctype/
http://www.juicystudio.com/choosing-doctype/
http://www.oreillynet.com/pub/a/net...type/index.html
http://www.webdevout.net/doctype_switching.php
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Why tables for layout is stupid
Why avoiding tables (for layout) is important
Why go table free?
Nested Tables: About the (ab)use of tables as layout tools in webpages.
Tables Vs. CSS - A Fight to the Death
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS
The layout is dead, long live the layout
Tables or CSS: Choosing a layout
What are tables really for?

Thanks again for the blunt info, but why would I have to change the selectors? if the id matches the selector why wouldn't it work? As I'm sure you know, the inner most tags seem to register with the correct css due to the selector, not because of the style class name. That is, in the example you gave me, they didn't have explicit styles made for classes one,two,and three. That's the same way as I'm retaining my original class names.

I know it's bad form to just lift tags from somewhere else, but I was still in PoC.

As it turns out, phpThumb seemed to be getting in the way. It was forcing the dimentions therefore not allowing the pic to flush left. Or at least this is what I've been able to do to get it to work a bit better.

I do appreciate the time, but I can google with the best of them. I've done all the reading I can through plenty of css books before I ended up here. If you actually see something in the code I have supplied, specific notes would help.

If you want to take a first look at the site link I supplied in the first post, you can see the progress I've made. Everything is flush to the bottom with my original css. Turns out it was correct from the start for that issue.

Now I need to see if I can flush the posters to the left of their current position. there's a phpThumb attrib for this, but it doesn't seem to work. Might be working against the css, but maybe not.. I'll keep digging though.

Let's try to stay positive or did my example page really look that green? I would of thought I have a working knowledge of css!

Thanks again!
-ryan

Your code is very messy. It's difficult to read it. The code you posted doesn't seem to be included in the page you linked to.

You don't need the #example1 CSS rule or <div>.

This is a bit old, but much of what it says is relevant -- What's wrong with the FONT element?

div,table which better?
i want to design the next website by div.

Welcome to DevArticles Forums, leoyang.

Next time please start a new thread.

The point of table-less layouts is not to simply replace tables with <div> elements as so many newbies mistakenly think. The point is to use semantically correct markup and then use CSS to make it look the way you want it to.
Read these:
http://www.camaban.co.uk/semanticwhat.php
http://www.webaim.org/techniques/structure/
http://www.brainstormsandraves.com/...tics/structure/
Standards don't necessarily have anything to do with being semantically correct
Semantics and Bad Code