Vertical align to bottom of floating div

big-momo

08-20-2010, 05:11 AM

Referencing the attached image, any ideas about how to achieve this layout using floats (rather than tables)?

The part that's giving me trouble is the bottom-left set of links, that should be aligned to the bottom of the container. Also, the width of the container is not fixed - it shouldn't have width specified at all, and expand to fit it's contents.

I'm not worried at all about fonts, borders, padding, colors, etc, just trying to achieve the attached macro concept using CSS, best-practices and w/out tables.

http://i34.tinypic.com/dh7qr6.jpg

This layout is easily achieved using tables; the following markup (using tables) will render and behave as described - regardless of the size of the links, the size of the image, or the length of the description, but obviously I'd like to know how to do this with best practices of floating divs.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow" />
<title>Title</title>

<style type="text/css">
td {
vertical-align : top;
}
td.links {
text-align : right;
}
td.links.bottom {
vertical-align : bottom;
}
td.description {
width : 150px;
}
</style>

</head>

<body>

<table>

<tr>
<td class="links">
<a href="#">Link</a>
<br />
<a href="#">Another Link</a>
</td>
<td rowspan="2">
<img src="http://static.howstuffworks.com/gif/code-breakers-1.jpg" />
</td>
<td class="description" rowspan="2">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</td>
</tr>

<tr>
<td class="bottom links">
<a href="#">Link</a>
<br />
<a href="#">Another Link</a>
</td>
</tr>

</table>

</body>
</html>

TYIA for any suggestions.

ch4sethe5un

08-20-2010, 07:32 AM

http://stackoverflow.com/questions/299870/how-to-center-an-image-horizontally-and-align-it-to-the-bottom-of-the-container

this may help you. :D

big-momo

08-20-2010, 09:28 AM

thanks for the link - unfortunately, that doesn't address the issue of a floated element not expanding to the height of it's parent, which is necessary to use the bottom : 0px technique :/

SB65

08-20-2010, 11:01 AM

Haven't looked at the link, but with your html something like:

<div id="wrap">
<div id="extra">Links here</div>
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>

</div>

then you can use absolute positioining to place the extra text always at the bottom left of #wrap. In this example all the columns are floated so we need to clear the float at the end of #wrap using overflow:auto.

#wrap{width:300px;background-color:lightgrey;overflow:auto;position:relative}
#left{float:left;width:98px;border:1px solid red}
#middle{float:left;width:98px;border:1px solid blue;height:300px}
#right{float:left;width:98px;border:1px solid green}
#extra{position:absolute;bottom:5px;left:5px}

big-momo

08-20-2010, 11:39 AM

awesome - thanks a ton. i also appreciate the "just what's necessary" example - very helpful in understanding the concept.

SB65

08-20-2010, 11:52 AM

You're welcome. Just to add a clarification - the above assumes that the content in #left is always shorter than that in either #middle or #right.

It looks like that's the case - but if not, or as a precaution you could add some padding-bottom to #left to allow space for #extra .