Menu
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.
855
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 */
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
