Keep DIVs side-by-side and make page horizontally scrollable if DIV contents too large

I wish to keep two divs side by side, no matter the width of the content in the right div. The left div will always have very short lines. The right div may have very long lines. If the lines are long, I would simply like the entire page to be horizontally scrollable.

Here's the basic layout:

(div)
+--------------------------------------------------
| (div>pre) (div>pre)
| +-------+ +-------------------------------------
| |line 1 | |
| |line 2 | | Make the page horizontally scroll
| |line 3 | | if needed based on the width of
| |line 4 | | content in this div. Keep these
| |line 5 | | divs side by side.
| |line 6 | |
| +-------+ +-------------------------------------
+--------------------------------------------------


Here's a snippet of my code:

body, pre
margin: 0;
padding: 0;


#container
border-style: solid;
border-color: blue;
white-space: nowrap;


#container::after
content: "";
clear: both;
display: table;


#sidebar
width: 100px;
float: left;
border-style: dashed;
border-color: green;


#main
float: left;
border-style: solid;
border-color: red;


<div id="container">
<div id="sidebar">
<pre>line 1
line 2
line 3
line 4
line 5
line 6</pre>
</div>
<div id="main">
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
foo
ea commodo consequat
Duis aute irure dolor
in reprehenderit in
voluptate velit</pre>
</div>
</div>

In the above snippet, things look great. However, if one of the lines in the #main div gets really long, then the divs do not remain side by side. Example: http://jsfiddle.net/ouqamf5y/1/

#main

How can I keep these divs side by side, no matter the width of the lines in the div on the right?

This is not a duplicate of How to get these two divs side-by-side? because that question doesn't address the overflow of wide div > pre lines.

div > pre

1 Answer
1

You haven't defined any width to the second block/right block.

Try to use this:

sidebar width: 30%; float: left;
main width:68%; float: left;


Once you define a width for both the blocks the main div will remain side by side. Check it out and let me know if it works.

div

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.