<style type="text/css">
    #contents {
        height: 400px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
    }
    #hints {
        height: 400px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
    }

    #daggraph {
        width: 100%;
        height: 100%;
        border: 1px solid #d3d3d3;
        box-sizing: border-box;
    }

    #hints .invisible:link, #hints .invisible:visited {
        color: gray;
    }

    .container {right: 0; text-align: center;}
    .container .left, .container .center, .container .right { display: inline-block; padding: 5px 10px; text-align: left;}
    .container .left { float: left; }
    .container .center { margin: 0 auto; }
    .container .right { float: right; }
    .clear { clear: both; }
    #hintsleft td, #hintsleft th, #hintscenter td, #hintscenter th, #hintsright td, #hintsright th {padding: 3px 8px; }
</style>

<div id="contents">
<div id="daggraph"></div>
</div>
<div id="hints">
    <div id="hintsupper">Use scroll to zoom in or out. Select or Hover over nodes and edges for more information ... (Try dragging nodes to replace them.)</div>
    <div class="container">
        <div class="left" id="hintsleft"></div>
        <div class="center" id="hintscenter"></div>
        <div class="right"  id="hintsright"></div>
        <div class="clear"></div>
    </div>
    <div id="hintsbottom"></div>
</div>