Sent by Donna Casey on 18 March 2005 19:07
Jeremy Amos wrote:
> The issue is that all the solutions to anchor the text (or image) to the
> bottom of the element by their very nature take them out of the document
> flow, which creates issues when trying to grow the container.
I often run into this issue for designs where text elements or links
need to sit at the bottom of a "masthead". I create the masthead as a
position:relative div, then (depending upon the nature of the text
elements) set up the heading or another div or whatever using
position:absolute; height:1.2em; width:n; bottom:n; blah, blah
The use of ems for the container height and em-based text sizing seems
to work ok for me. The container expands as needed and never spills out
of the masthead div. Here's some sample code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 101%;
text-align: center;
}
#masthead {
position: relative;
height: 100px;
width: 90%;
border: 1px solid #003399;
font-size: .8em;
text-align: left;
margin-right: auto;
margin-left: auto;
}
#utilitylinks {
position: absolute;
height: 1.2em;
width: 50%;
right: 5px;
bottom: 5px;
text-align: right;
}
-->
</style>
</head>
<body>
<div id="masthead">
<div id="utilitylinks"><a href="#">link</a> | <a href="#">link</a> |
<a href="#">link</a> </div>
</div>
</body>
</html>
Would that not work for you? There might be some issues related to
doctype and the type of element you want to have sit on the bottom, but
you should be able to work around those.
HTH,
Donna Casey
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
