Two-columns, where the second column automatically adapts its width

Question

I'd like to have a left column (#a) using full height of the page, and a right column (#b) using the rest of the page:

* { margin: 0; padding: 0; }
#a { position: fixed; height: 100%; }
#b { background-color: blue; }

<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>

Here, the result is wrong: the text in the right column is not visible.

How to make that the right column is shown on the right, and not under the left column?

Also:

Hovering mouse at the limit between right and left column should display a resize cursor: when we resize the left column horizontally (from 0% to 100% of full browser width), the right column should adapt in real-time
I tried solutions by making the right column in a box, but then when I make left column 0% width / right column 100% width, then when printing from the browser, the browser only sees one page (and tries to print only one page, and also tries to print the y-scrollbar too, funnily!), instead of printing the content into several pages, as usual.

Are you hoping for a css-only solution? I believe the only way to achieve the resize functionality you need is with javascript, at which point all the requirements here become easier. — mikkelrd, Sep 25 '17 at 17:35
Preferrably @mikkelrd, but if not possible, a JS solution will be ok. — Basj, Sep 25 '17 at 17:39
Should both columns be 100% height of the page, never any more or less? — mikkelrd, Sep 25 '17 at 17:51

score 0 · Answer 1 · answered Sep 25 '17 at 18:34

Here is a CSS-only solution that relies on the flex display property. This provides nearly all the functionality you list, and assumes full page height is acceptable for both columns. There isn't a way in CSS only to drag the side of an element to resize, except for the native control on textareas available in the bottom right corner.

body {
 margin: 0;
 width: 100vw;
 height: 100vh;
}

.parent {
 display: flex;
 width: 100%;
 height: 100%;
}

.left {
 resize: horizontal;
 background: lightblue;
}

.right {
 flex: 1;
 background: coral;
}

<div class="parent">
 <textarea class="left"></textarea>
 <div class="right">asdf</div>
</div>

score 0 · Answer 2 · answered Sep 25 '17 at 18:40

Your element #a has position: fixed; This means it COVERS the other element, which is placed at the left top, since the a fixed-positioned element is taken out of the document flow layout-wise.

To avoid this (if you insist on the fixed position), give them settings as below:

P.S.: One question at a time...

* {
  margin: 0;
  padding: 0;
}

#a {
  position: fixed;
  height: 100%;
  width: 35%;
}

#b {
  position: relative;
  width: 65%;
  left: 35%;
  background-color: blue;
}

<textarea id="a">hello</textarea>
<div id="b">h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br>h<br></div>

If you drag the bottom-right of the textarea (there's a resize area), the right part doesn't seem to move. Maybe you forgot to copy/paste a line into the snippet? — Basj, Sep 25 '17 at 19:35

Two-columns, where the second column automatically adapts its width

2 Answers2