Unobtrusively insert vertical divider in layout

Question

I want to insert a grey vertical divider that splits the two sides evenly to show a logical division. Since the content on the two sides can vary in height depending on what the user selects, the divider needs to scale appropriately -- in other words, can't be fixed height.

As an aside, ideally this style element would be something that I could conditionally insert and remove. Obviously some sort of div would give maximize control.

Here's my existing HTML/CSS code:

http://jsfiddle.net/keruilin/u5GgT/47/

Which DIV is the one that can change in height? – Pekka Jan 05 '11 at 18:08 — Pekka, Jan 05 '11 at 18:08

score 1 · Accepted Answer · edited May 23 '17 at 11:47

1

Rather than inserting an element, I'd look at styling the two sides as equal-height columns. Use a border-right on the left side, or border-left on the right, to show the division.

See: CSS - Equal Height Columns? for guidance on equal-height columns.

edited May 23 '17 at 11:47

Community

1
1

answered Jan 05 '11 at 18:09

Paul Roub

36,322
27
84
93

score 0 · Answer 2 · answered Jan 05 '11 at 18:15

0

How about you apply border-left: 2px solid gray or border-right: 2px solid gray to one of the columns?

answered Jan 05 '11 at 18:15

JakeParis

11,056
3
42
65

Unobtrusively insert vertical divider in layout

2 Answers2