Here is my progress so far. I encountered an issue where my <li> elements were stacking in the left corner. How can I align them inline to the right corner?
HTML
<div id="page">
<div class="header Fixed"> <a href="#menu"></a>Demo
<ul id="account">
<li><a href="#">Username</a>
</li>
<li><a href="#">Logout</a>
</li>
</ul>
</div>
<div class="content" id="content">
<div id="first">
<p><strong>This is the first section.</strong>
<br />Notice how the fixed header and footer slide out along with the page.</p>
<p><a href="#menu">Open the menu.</a>
</p>
</div>
</div>
<div class="footer Fixed">Copyright @ 2015 , All rights reserved.</div>
<nav id="menu" th:include="${filename}"></nav>
</div>
CSS
html, body {
padding: 0;
margin: 0;
}
body {
background-color:#fff;
font-family:'Lucida Grande', Tahoma, Verdana, sans-serif;
font-size:14px;
line-height:22px;
color:#666;
position:relative;
-webkit-text-size-adjust:none;
}
body * {
text-shadow:none;
}
h1, h2, h3, h4, h5, h6 {
line-height:1;
font-weight:bold;
margin:20px 0 10px 0;
}
h1, h2, h3 {
font-size:18px;
}
h4, h5, h6 {
font-size:16px;
}
p {
margin:0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover {
color:inherit;
text-decoration:underline;
}
nav:not(.mm-menu) {
display:none;
}
.header, .content, .footer {
text-align:center;
}
.header, .footer {
background:#0ca3d2;
color:#fff;
line-height:40px;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
height:40px;
padding:0 50px;
}
.header.fixed {
position:fixed;
top:0;
left:0;
}
.footer.fixed {
position:fixed;
bottom:0;
left:0;
}
.header a {
background:center center no-repeat transparent;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC);
font-size:16px;
font-weight:bold;
display:block;
width:40px;
height:40px;
position:absolute;
top:0;
left:10px;
}
.footer a {
font-size:12px;
font-weight:bold;
display:block;
bottom:0;
}
.content {
padding:150px 50px 50px 50px;
}
#account li {
list-style-type:none;
top:0;
display:inline;
padding:0px 5px;
float:right;
}
#account li a {
text-align:right;
text-decoration:none;
}
#account li a:hover {
color:#f0ad4e;
}
#intro, #first {
height:400px;
}
#intro {
padding-top:0;
}
#first {
border-top:1px solid #ccc;
padding-top:150px;
}