Css Vertical Alignment Of Div

I have a heading, then below that I display a selection of items next to each other. On the same line as the selection of items I display a single picture. The issue I'm having is

Solution 1:

If the image is a fixed size, a quick fix for this problem would simply be to use a negative margin-top, so that the image is its own height above - so bottom is actually where the top is now.

E.g. If the image is 130px height, do:

#single_imageimg { margin-top: -130px; }

Solution 2:

One potential solution is to wrap them in a container and absolutely position #items to the bottom of the container. Here is a sample:

http://jsfiddle.net/5csWH/

<divclass="container"><h1>H1 Title</h1><divid="items"><ul><li>A</li><li>B</li><li>C</li></ul></div><divid="single_image"><imgsrc="myImage.png" /></div><divclass="clearfix"></div></div>

CSS:

#items          { float:left; }
#itemsul       { list-style:none; margin:0; padding:0; position: absolute; bottom: 0; }
#itemsulli    { float:left; margin-right:20px; font-size:22px; width: 50px; background: #DDD; }

#single_image       { }
#single_imageimg   { float:right; height:130px; width:inherit; background: #DDD; }

.container { width: 50%; margin: 0 auto; background: #EEE; position: relative; }
.clearfix { clear: both; }​