When creating an HTML report, there may be a requirement for rows to have elements printed on the same line with only absolute left positions specified at design time.
It is desired that each row appears on the next line after the previous row without explicitly setting a top attribute.
row1 field1 row1 field2
row2 field1 row2 field2
Understanding that absolute positioning is relative to the parent element's position, the CSS should include:
<!DOCTYPE html>
<html>
<head>
<style>
.row {
position: relative;
}
.field {
position: absolute;
}
</style>
</head>
<body>
<div class='row'>
<div class='field' style='left:5cm'>row1 field1</div>
<div class='field' style='left:16cm'>row1 field2</div>
</div>
<div class='row'>
<div class='field' style='left:8cm'>row2 field1</div>
<div class='field' style='left:12cm'>row2 field2</div>
</div>
</body>
</html>
Despite following the correct CSS rules, the elements may still appear on the same row rather than in separate rows.
One solution would be to add top attributes from the top of the screen in order to achieve the desired layout:
<div class='row'>
<div class='field' style='top:1cm;left:5cm'>row1 field1</div>
<div class='field' style='top:1cm;left:16cm'>row1 field2</div>
</div>
<div class='row'>
<div class='field' style='top:2cm;left:8cm'>row2 field1</div>
<div class='field' style='top:2cm;left:12cm'>row2 field2</div>
</div>
However, calculating the proper top values based on browser rendering can be challenging. Is there a way to achieve the desired layout without using the top attribute?
If necessary, alternative elements such as tables can be used instead of divs to generate the report. This HTML report is generated dynamically at runtime from an ASP.NET MVC4 application using RazorEngine and is intended for display in a modern desktop browser.