0

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/

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.

synaptik
  • 8,971
  • 16
  • 71
  • 98
  • Possible duplicate of [How to get these two divs side-by-side?](https://stackoverflow.com/questions/5387392/how-to-get-these-two-divs-side-by-side) – Maximilian Ballard Aug 29 '18 at 19:11
  • @truecam No, not a duplicate. Accepted solution from that question does not meet conditions required in this question. Example: http://jsfiddle.net/c6242/10306/ – synaptik Aug 29 '18 at 19:15

1 Answers1

0

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.

Arash Hatami
  • 5,297
  • 5
  • 39
  • 59
Dolly
  • 1