<!DOCTYPE html>
<html>
<head>
<!-- Stylesheet References -->
<!-- <link rel="stylesheet" type="text/css" href="/path/to/css/file/here" /> -->
<!-- JavaScript References -->
<!-- <script type="text/javascript" src="/path/to/js/file/here" /> -->
<style type="text/css">
html, body {
/*
* In order for the two nested divs to have the intended height (50% each),
* BOTH the html and body tags must have their height set to 100%. Otherwise, the
* height over everything collapses.
*/
height: 100%;
/*
* Whenever I'm doing a splitter pane arrangement, I always set overflow: hidden;
* otherwise I always seem to get scrollbars. I've never really figured out why
* the browsers give me scrollbars, but overflow: hidden; always seems to be a good
* idea when doing split panes. That way if you're calculations are off by a pixel or
* two it doesn't matter.
*/
overflow: hidden;
margin: 5px;
padding: 0;
border: 0;
box-sizing: border-box;
}
div.pane {
/* Note: When using border-box, the size of the box includes the border and the
padding, but not the margin, so we have to subtract off the margins */
height: calc(50% - 10px);
border-collapse: collapse;
box-sizing: border-box;
padding: 5px;
}
div.pane-top {
/*
* If you don't want a 50/50 arrangement, remove the height setting from div.pane
* and set each pane independently. Subtract off the margins in both panes.
*/
/* height: calc(30% - 10px); */
border: 1px solid black;
}
div.pane-bottom {
/*
* If you don't want a 50/50 arrangement, remove the height setting from div.pane
* and set each pane independently. Subtract off the margins in both panes.
*/
/* height: calc(70% - 10px); */
/* I tried using border-collapse: collapse; but that seems to only work for tables */
border: 1px solid black;
border-top-width: 0;
}
</style>
</head>
<body>
<div class="pane pane-top">
Top Pane Here
<br /><br />
This intention of a layout like this would be to have the top pane contain a navigatable
item summary list, which when selected displays the details in the bottom pane.
<br /><br />
Links from the top pane can target the bottom pane.
<br /><br />
<a href="../pages/html/html-tags.html" target="details">List of HTML Tags</a><br />
<a href="../pages/misc/todo.html" target="details">To Do List</a>
</div>
<div class="pane pane-bottom">
<iframe name="details" style="height: 100%; width: 100%; margin: 0; border: 0; padding: 0;" width="100%" height="100%" src="../pages/html/html-tags.html">
</iframe>
</div>
</body>
</html>