LeRoy LeRoy - 6 days ago 8
HTML Question

Page Header and Bottom Page alignment

I have a feeling this is easy but I have no idea where to start.

I will like to add a menu at the top of the page and some links at the bottom with %.

The problem is I would like to leave the Center empty. How do I do that? I have tried tables and css.

Sample Code:

<body>
<table width="100%" height="337" border="1" align="center">
<tr>
<td height="36" align="center">Drop down menu(Should be centered) - 10% page fill</td>
</tr>
<tr>
<td height="268">Empty space - 80% page fill</td>
</tr>
<tr>
<td height="23">Bottom Text - 10% page fill</td>
</tr>
</table>
</body>


Note. There is a Background with changing images. That's why I want the center empty

Answer

The solution is just using sticky footer:

HTML:

<!-- Navigation -->
<div class="menu">
    <h2>Menu</h2>
</div>

<!-- Content -->
<div class="page-wrap">
    <h2>Content</h2>
</div>

<!-- Sticky Footer -->
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

CSS:

* {
  margin: 0;
}
html, body {
  height: 100%;
}

.menu {
    background-color: red;
    padding: 10px;
}

.page-wrap {
  background-color: green;
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 142px; 
}
.site-footer {
  background: orange;
}
Comments