rendering absolute div inside a relative div (CSS)

#26296

I am trying to nest an absolute div inside a relative in order to have the text in absolute flow up from the bottom of the absolute. The following HTML displays fine (the way I want it) in IE & FF, but the text renders on top of the box on the PDF output from PD4ML. Any help/suggestions?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Box Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.relbox1 {
position: relative;
height: 100px;
background-color: pink;
}
.absbox1 {
position:absolute;
bottom: 0px;
border: 1px solid red;
}
-->
</style>
</head>
<body>
<div class="relbox1">
<div class="absbox1">this text goes<br>on bottom</div>
</div>
</body>
</html>

#27658

Currently PD4ML does not support bottom CSS property (https://pd4ml.com/css.htm). For absolute positioning only top and left can be used.

In your particular case the needed positioning can be achieved without absolute positioning, just with the vertical align set to bottom

#27660

I’m not seeing how vertical-align: bottom would work in my situation. Can you provide a code sample that illustrates the desired effect _and_ prints to PDF as specified?

thanks

#27659

You are right: it does not work with <div>, but with <table> it does:

<html>
<head>
<title>Box Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.relbox1 {
position: relative;
height: 100px; width: 100%;
background-color: pink;
}
.absbox1 {
border: 1px solid red;

}
-->
</style>
</head>
<body>
<table cellpadding=0 cellspacing=0 class="relbox1"><td valign=bottom>
<div class="absbox1">this text goes<br>on bottom</div>
</td></tr></table>
</body>
</html>

#27661

which brings me back to my original table bug of not working on a td+td+td

Any help/fixes would be appreciated.

see: https://pd4ml.com/forums/topic/nested-css-definitions-not-rendered/#post-27465

#27662

TD+TD+TD is fixed by v360b1

[Author]

Posts