0

So, I'm making a page with 2 simple sidebars, one on the left and one on the right. The problem is, the sidebar have an height depending on its content, same is for the page. So, if the page content is shorter than the sidebar content, it will not display a single rectangle\square but it will display a sidebar rectangle longer than the page. On the other side, if the page content is longer than the sidebar, it will extend the rectangle and also "extends" the sidebar whitespace, but, that whitespace is of the page and not of the sidebar. The struct of the page is like that:

<div id="page">
    <div id="sidebar1">
    </div>
    <div id="sidebar2">
    </div>
    <div id="pageContent">
    </div>
</div>
kHz-
  • 29
  • 7

1 Answers1

0

Use display:inline-block; and Width Demo Here

#sidebar1{
  display:inline-block;
  width:24%;
  background:red;
  height: 300px;
}

#sidebar2{
   display:inline-block;
   width:24%;
    background:blue;
  height: 300px;
}

#pageContent{
   display:inline-block;
   width:50%;
    background:green;
  height: 300px;
}
<div id="page">
    <div id="sidebar1">
    </div>
    <div id="sidebar2">
    </div>
    <div id="pageContent">
    </div>
</div>
McKabue
  • 2,076
  • 1
  • 19
  • 34
  • That's not working. If you try to put something (like a simple list with a different number of elements) they will have different positions – kHz- Apr 02 '17 at 21:54