JSFiddle - React, Tailwind, and code Playground
HTML
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>relative absolute terror</title>
</head>
<body>
<!-- sticky footer -->
<div id="wrapper">
<img id="logo" src="http://www.google.de/images/srpr/logo3w.png" alt="Logo" />
<div id="callUs">
Tel. 1337
</div>
<div id="topNav">
I topNav
</div>
<div id="example">
I additional absolutely positioned example div
</div>
<!-- sticky footer -->
<div id="pusher"></div>
</div>
<div id="footer">
Hi there
</div>
</body>
</html>
CSS
/* LITTLE CSS RESET
================================================== */
*
{
margin: 0px;
padding: 0px;
}
html, body
{
height: 100%;
}
/* ABSOLUTE POSITIONED ELEMENTS
================================================== */
#logo
{
position: absolute;
top: 5px;
left: 50%;
heigh: 50px;
width: 100px;
margin-left: -250px;
}
#callUs
{
position: absolute;
top: 10px;
right: 50%;
margin-right: -250px;
}
#topNav
{
position: absolute;
top: 50px;
left: 50%;
height: 40px;
width: 500px;
margin-left: -250px;
background: #F00;
}
#example
{
position: absolute;
top: 100px;
left: 50%;
height: 100px;
width: 500px;
margin-left: -250px;
border: 1px solid #000;
}
/* STICKY FOOTER
================================================== */
#wrapper
{
height: 100%;
height: auto !important;
min-height: 100%;
margin: 0 auto -60px;
}
#pusher
{
height: 60px;
clear: both;
}
#footer
{
position: relative;
height: 60px;
background: #0F0;
}