0

I have two divs:

<div class="wrapper">
    <section id="left-panel"></section>
    <section id="right-panel"></section>
</div>

I have the height of right-panel to always equal height of left-panel. How do I accomplish this using CSS only?

This is not the same as saying I want them to be same height. I want the height to be the same, but only to the maximum of the left-panel height. So if right panel is taller, then it should be clipped at the bottom and become an overflow and still respect the height of the left panel.

Also, the content of left panel is not dynamic, but it is not the same across all pages, so I cannot set max-height on the left panel.

Kousha
  • 32,871
  • 51
  • 172
  • 296
  • 1
    Duplicate of http://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – mituw16 Aug 23 '16 at 18:34
  • @mituw16: not a duplicate; I don't just want them to be the same, I want the right one to be the same height as the left one only. So if right one is taller, that should NOT effect the height. – Kousha Aug 23 '16 at 18:38
  • @Kousha....That is not clear in your question. Please edit it accordingly – mituw16 Aug 23 '16 at 18:39

1 Answers1

0

I think you need to declare the height of the wrapper in pixels. Than declare section height 100% to fill that wrapper space. Then give section overflow-y scroll. This is what I tried in the inspector (width and float are just to place sections one next to the other):

.wrapper {
    height: 50px;
}

.wrapper section {
    width: 10%;
    height: 100%;
    float: left;
    overflow-y: scroll;
}
Vcasso
  • 1,328
  • 1
  • 8
  • 14