Unobtrusively insert vertical divider in layout
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 hei开发者_开发技巧ght 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/
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.
How about you apply border-left: 2px solid gray
or border-right: 2px solid gray
to one of the columns?
精彩评论