Search code examples
htmlcssadminlte

How do I create a multi-column layout based off of AdminLTE that grows with sidebar content?

I have the following layout which is a alteration of the AdminLTE boxed layout template:

HTML

<div class="wrapper">
  <div class="header">
    Header
  </div>
  <div class="leftbar">
    Left bar
  </div>
  <div class="content-wrapper">
    <div class="content">
      Content
    </div>
    <div class="content-rightbar">
      Right bar
    </div>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

CSS

body {
  background-color: lightgray;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.wrapper {
  overflow: hidden;
  background-color: #222d32;
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  height: 100%;
}

.header {
  position: relative;
  height: 30px;
  z-index: 1030;
  color: white;
  background-color: #367fa9;
  padding: 2px;
}

.leftbar {
  color: white;
  background-color: #222d32;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 30px;
  min-height: 100%;
  width: 100px;
  z-index: 810;
  padding: 40px 10px 10px 10px;
}

.content-wrapper {
  margin-right: 100px;
  margin-left: 100px;
  background-color: #ecf0f5;
  z-index: 800;
}

.content {
  min-height: 200px;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
}

.content-rightbar {
  right: 0;
  min-height: calc(100% - 30px);
  position: absolute;
  background: #f9fafc;
  border-left: 1px solid #d2d6de;
  z-index: 1010;
  top: 0;
  width: 100px;
  text-align: right;
  padding: 40px 10px 0 10px;
}

.footer {
  background: #fff;
  border-top: 1px solid #d2d6de;
  margin-left: 100px;
  z-index: 9999;
  height: 30px;
  padding: 2px;
}

Codepen

https://codepen.io/kspearrin/pen/QqBrpB

Result

enter image description here

Problems

This looks precisely how I would like it to with one problem:

  • Overflowing the leftbar and content-rightbar with content causes the overflowed content to be hidden. Height is only determined by the content inside content.

Examples:

enter image description here

enter image description here

Question

How can I make it so that the either the entire layout's height within the body increases with the content of the content, leftbar, and content-rightbar - OR - that the leftbar and content-rightbar scroll with their overflowing content?

Solution

  • You have set your overflow to hidden for your wrapper, you can just set it to "auto" or "scroll" to show the content inside your container. Only then it will take it will be longer then your content container and then it will take in the whole width because there are no other elements right there.

    I would in fact recommend you to reconsider using flex box as it will keep your elements at the same height and will prevent all the overflow issues you have right now.

    If you are unfamiliar with flex boxes I can recommend you https://css-tricks.com/snippets/css/a-guide-to-flexbox/ at the end you will find an example for a multi column layout which includes all the elements you need for your project.

    Also another tip: You could use an unordered list for your sidebar items, as this is the most common way to do it.

    ul {list-style: none;}
    <ul>
    <li>Left bar</li>
    <li>Left bar</li>
    <li>Left bar</li>
</ul>