In my ASP.NET web application that targets .NET 3.5 and utilizes an AJAX asp:UpdatePanel, I have structured the page layout using multiple div elements to divide the vertical space into sections - header, first content, second content, third content, and footer.
The first content section displays general information about the main item on the page such as title and properties. The third section contains additional tables of information related to the item. The headers and footers serve their standard roles.
The second content section is divided into two subsections - a list of images and the currently selected image. This functions like a thumbnail list where clicking on an item updates the displayed image. The selected image section within the AJAX asp.UpdatePanel includes a title, properties table, and the image itself that all update upon selection changes.
As the list of images can be substantial in length, causing whitespace between items, I aim to size the list to match the height of the selected image section with a scrollbar for overflow. Additionally, the selected image section must maintain a fixed height based on user-selected image size (small, medium, large).
I am seeking guidance on achieving this desired layout without specifying explicit widths or heights aside from the selected image's div. Various attempts with floating and other techniques have not yielded the intended results.
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
...
</style>
</head>
<body>
<div id="page-header"><h2>My Page!<h2></div>
<div id="first-section" class="section">
...
</div>
<div id="second-section" class="section">
...
</div>
<div id="third-section" class="section">
...
</div>
<div id="page-footer">End of My Page...</div>
</body>
</html>