Home Main content coming below sidebar. Float not working?
Reply: 1

Main content coming below sidebar. Float not working?

Inderpal Singh
1#
Inderpal Singh Published in 2017-09-14 09:23:21Z

I have a layout like below -

.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>

My main content-wrapper is coming below the sidebar and footer somewhere in the middle. I have tried using

display:inline-flex

on content-wrapper which places page-content next to sidebar but footer still remains in middle of page. Please help me with this.

Super User
2#
Super User Reply to 2017-09-14 09:35:55Z

You can set page-content width using calc. check updated snippet below

body {
    margin: 0px;
}
.page-wrapper {
    height: 100%;
    min-height: 970px;
    position: relative;
    width: 100%;
    padding-top: 50px;
    display: block;
}    
.pageheader {
    min-height: 50px;
    position: fixed;
    min-width: 100%;
    background: red;
}
.navbar-fixed-top {
    top: 0;
}
.content-wrapper {
    background: grey;
    float: left;
    width: 100%;
}
.page-sidebar {
    float: left;
    width: 180px;
    overflow: auto;
}
.page-content {
    min-height: 970px;
    float:left;
    background: green;
    width: calc(100% - 180px);
}
footer {
    width: 100%;
    text-align: center;
    position:relative;
    background: black;
    clear: both;
}
<div class="page-wrapper">
    <div>
        <div id="header" class="pageheader navbar navbar-fixed-top">    header<br/>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="content-wrapper">
        <div>   
            <div class="clearfix"></div>
            <div id=".navbar-collapse" class="page-sidebar">sidebar</div>
            <div class="clearfix"></div>
        </div>
        <div>
            <div id="content" class="page-content">    content 
        </div>
    </div> 
            <div class="clearfix"></div> 
    <div>
        <footer id="footer">footer
        </footer> 
    </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.306018 second(s) , Gzip On .

© 2016 Powered by cudou.com design MATCHINFO