How to make this breed of resizable vertical divider for two divs?


Tags: css,html5

Problem :

I want to know what the best way is to have two divs (unless this is using some table?) that are side by side, separated by a vertical divider.

enter image description here

Notice how when the handler is resized, the elements appear to be resizing to accomodate the new width: enter image description here

Notice how when the handler is further resized, it appears to overlap the elements on the sidebar exposing just a little bit of the text. If the user continues to resize to the left, it covers up all the text.

enter image description here

How to create this with css/html5/maybe some javascript? Examples would be great of (divs? or whatever basic elements with text or anything necessary to illustrate).



Solution :

There is a splitter plugin for jQuery.


    CSS Howto..

    how to display an image on small screens and videos on large screen in html

    How do I get these hover effects but with diamonds instead of circles

    how i center div elements horizontally in css?

    How do I get the name of div a user must click to appear in a text div?

    How do I configure syntax highlighting for LESS in coda?

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    CSS: How to eliminate border for a particular row/column in the table

    How to remove empty space in thumbnail grid

    How to control the expandability of textarea from width perspective

    How to set two directions for flex-box css?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    CSS how to push text away from border

    How to create a 3 columns fluid fixed fluid layout?

    Jquery: how to get menu to expand towards the right instead of the left

    How do you style/select inline-block elements in the first row when in a flexible container?

    how to disable drupal7 system css files?

    How do I change button color on press in bootstrap?

    How to horizontally center text in bootstrap button?

    How to change particular cells color using css in Ext.ux.touchcalendar in sencha touch

    How to generate ABBAABBA… sequence with PHP and CSS nth-child

    How to add dynamic CSS style sheet for single xhtml file

    css how to float or display two elements of unknown widths next to each other inside a div of unknown width

    How to keep nav bar from shifting elements to next line when zooming in?

    How can I center a table relative to one column in HTML/CSS?

    How can I programatically show/hide a button that is part of the body template in Meteor?

    How do i create a gem which will generate a css file from a template

    wordpress submenu css show on parent active and child active

    how to design a search panel like in mashable with css only

    css: How to add blank space under a sprint element

    How to align divs side by side without one being slightly lower?