How to prevent overlapping of text on bottom-aligned DIV element

Question

When I try to bottom-align text in a DIV element, I face the issue that when the text above is long enough to reach the bottom of the DIV element, it overlaps with the bottom-aligned text. Here is the code: http://jsfiddle.net/Kw758/

<html>
<head>
<title>Date</title>
<style type="text/css">
#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
}

#date {
  margin-top: 1em;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
</style>
</head>
<body>
<div id="container">
    <span>
    This is a very very long text that might overlap with the date
    just below this.
    </span>
    <div id="date">
    January 1, 2012
    </div>
</div>
</body>
</html>

How can I prevent the overlapping of the text in SPAN element and the text in DIV element?

The reason why I am bottom-aligning it with 'position' attribute instead of just setting the date to 'float: right' is because in my actual problem, the DIV is supposed to have a min-height set, so the bottom border of the DIV element might be very far away from the text in the SPAN element.

looks similar to this one: http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div — dldnh, Mar 24 '12 at 22:44
It is, but in your example, the text is required to get wrapped around the bottom positioned element. That's not the case here and it therefore appears to be much simpler. — Simon Steinberger, Mar 24 '12 at 23:01

score 1 · Accepted Answer · answered Mar 24 '12 at 22:35

1

Wouldn't it be enough to set a padding-bottom to #container?

#container {
  position: relative;
  border: 1px solid gray;
  width: 200px;
  padding-bottom: 30px; /* depending on font-size of span */
}

answered Mar 24 '12 at 22:35

Simon Steinberger

6,605
5
55
97

How to prevent overlapping of text on bottom-aligned DIV element

1 Answers1