centered layout (big-pic)

by Jay Zelenkov

HTML

<div class="wrapper">
    <div class="reportPane">
        <div class="title centered">
            Title goes here
        </div>
        <div class="table">
            Complex table
        </div>
        <div class="footer centered">
            <div class="navBar">quick nav</div>
            <span>Footer goes here</span>
        </div>
    </div>
    
</div>

CSS

.reportPane {
    display: inline-block;
}

.table{
    text-align: left;
    width: 500px;
    height: 500px;
    border: 1px solid gray;
    font-style: italic;
}


.title { font-size: 2em; }
.centered { text-align: center; }
.footer span { font-size: 0.8em; }
.navBar {
    width: 200px;
    height: 20px;
    margin: 0 auto;
    background-color: orange;
}
.wrapper {
    text-align: center;
}