M.C. M.C. - 5 months ago 12
HTML Question

HTML put two div side by side

How can I put two div side by side with CSS like shown on the image down here?

Eventually I'd like the div on the left to be scrollable, but it's not necessary.

The most important thing I need is to put them side by side.

enter image description here


I understand the downvotes on the question. But the fact that 'we' are failing to come up with a working solution makes me a bit sad. Flexbox is cool and very elegant, but it simply does not work in a production environment without any fixes/hacks. Therefore I am providing this working cross-browser answer.

Here is your HTML:

<div class="wrapper">
  <div class="div1">
    <!-- div code here -->
  <div class="div2">
    <!-- div code here -->

With the following CSS:

.wrapper {display: table;}
.div1, .div2 {display: table-cell;}

And here is the working code: http://codepen.io/anon/pen/xVMprO

Here is the code with overflow: http://codepen.io/anon/pen/NNoXBJ