<div id="content">
  <fieldset id="LeftPanel">
	<div id="div_A" class="window top">
	<div id="div_left" class="handler_horizontal"></div>
	<div id="div_B" class="window bottom">
  <div id="div_vertical" class="handler_vertical"></div>
  <fieldset id="RightPanel">
	<div id="div_C" class="window top">
	<div id="div_right" class="handler_horizontal"></div>
	<div id="div_D" class="window bottom">


body {
    background: none repeat scroll 0 0 #f5f5f5;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 10px;
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    border: 0 none;
    width: 50%;
    float: left;
    width: 50%;
    float: right;
.handler_vertical {
    cursor: col-resize;
    width: 8px;
    float: left;
.handler_horizontal {
    cursor: row-resize;
    height: 8px;
    width: 100%;
    float: left;
.window {
    border: 1px solid #ADADAD;
    width: 100%;
    float: left;
  color: #ccc
.top {
    height: 25%;
.bottom {
    height: 75%;


$(function () {
    window.onresize = resize;

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height();//20=body padding:10px
    $("#content").css({ "min-height": h - divHight + "px" });
    $("#div_vertical").css({ "height": h - divHight + "px" });
    $("#LeftPanel").css({ "height": h - divHight + "px" });
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"

jQuery.resizable = function(resizerID, vOrH){
            jQuery('#' + resizerID).bind("mousedown", function(e){
            var start = e.pageY;
            if(vOrH=='v') start = e.pageX;
            jQuery('body').bind("mouseup", function(){
            jQuery('body').bind("mousemove", function(e){
                    var end = e.pageY;
                    if(vOrH=='v') end = e.pageX;
                    jQuery('#' + resizerID).prev().height(jQuery('#' + resizerID).prev().height()+ (end-start)); 
                    jQuery('#' + resizerID).next().height(jQuery('#' + resizerID).next().height()- (end-start)); 
                    jQuery('#' + resizerID).prev().width(jQuery('#' + resizerID).prev().width()+ (end-start)); 
                    jQuery('#' + resizerID).next().width(jQuery('#' + resizerID).next().width()- (end-start)); 
                start = end;
    jQuery.resizable('div_vertical', "v");
    jQuery.resizable('div_right', "h");
    jQuery.resizable('div_left', "h");

CodePlay Playground as you play with the keyboard:


The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.

CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.


- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.

- Close this? [Esc], or a Click outside.

Front End User - New /Save Post is Now Open, Register *required.
New Play Now