HTML put two div side by side [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
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.

Answer 1

Side by side divs:
display: inline-block;
//add this to both divs
http://www.w3schools.com/cssref/pr_class_display.asp
Scrollable div:
overflow: scroll;
//add this to the left div
http://www.w3schools.com/cssref/pr_pos_overflow.asp
example:
https://jsfiddle.net/90h5c20x/

Answer 2

Put your divs into common parent, and then you have to use css. For the left div, add style="float: left". For the second one write style="float: right".

Answer 3

You can wrap both divs inside another div and apply the flexbox to the wrapper
html:
<div class="wrapper">
<div class="div1">
<!-- div code here -->
</div>
<div class="div2">
<!-- div code here -->
</div>
</div>
CSS:
.wapper{
display: flex;
flex-flow: row wrap;
}
This works smoother than inline-block and floats and is mobile responsive. It will also allow the scrolling for the first div.

Answer 4

Flexbox is cool and very elegant, but it simply does not work in a production environment (IE9 and lower) without any fixes/hacks. Therefore I am providing this working cross-browser answer.
Here is your HTML:
<h1>Title</h1>
<div class="wrapper">
<div class="div1">
<!-- div code here -->
</div>
<div class="div2">
<!-- div code here -->
</div>
</div>
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