Here is the layout I am working with:
.page-wrapper {
height: 100%;
min-height: 970px;
position: relative;
}
.pageheader {
min-height: 50px;
position: fixed;
min-width: 100%;
}
.navbar-fixed-top {
top: 0;
}
.page-sidebar {
float: left;
width: 180px;
top: 0;
overflow: auto;
}
.page-content {
min-height: 970px;
float: left;
}
footer {
width: 100%;
text-align: center;
position: relative;
}<div class="page-wrapper">
<div>
<div id="header" class="pageheader navbar navbar-fixed-top">
Navbar Top
</div>
<div class="clearfix"></div>
</div>
<div class="content-wrapper">
<div>
<div class="clearfix"></div>
<div id=".navbar-collapse" class="page-sidebar">
Navbar Side
</div>
<div class="clearfix"></div>
</div>
<div>
<div id="content" class="page-content">
Content
</div>
</div>
<div>
<footer id="footer">
Foter
</footer>
</div>
</div>The issue I am facing is that my main content-wrapper is appearing below the sidebar and footer, somewhere in the middle of the page. I have attempted using
display:inline-flex
on content-wrapper to place page-content next to sidebar, but the footer still remains in the middle of the page. Any suggestions on how I can resolve this would be greatly appreciated.