Div Windows

Proper CSS and HTML structure for creating a 'Window' using div elements. Can be styled to give it different looks.

HTML

<div class='ddbw'>
    <div class='dsb'>
        <div class='dcf'>
            <div class='dfw-sb'>
                <div class='dsbw'>
                    <input class='dif-sb' type='text' placeholder='Search for content' />
                </div>
            </div>
            <div class='dpw'>
                <button id=':F:b:f' class='dcfb' role='button' tabindex='0' aria-haspopup='false'>Find</button>
                <div id=':F:b:f:tt' class='dtt' >
                    Find
                </div>
            </div>
            <div class='dpw'>
                <button id=':F:b:a' class='dmab' role='button' tabindex='0' aria-haspopup='false' >Action</button>
                <div id=':F:b:a:tt' class='dtt'>
                    Action
                </div>
            </div>
            <div class='dpw'>
                <button id=':F:b:st' class='dmsb' role='button' tabindex='0' aria-haspopup='false'>Standard</button>
                <div id=':F:b:st:tt' class='dtt'>
                    Standard
                </div>
            </div>
            <div class='dpw'>
                <div id=':px:gs' class='dpxb' role='button' tabindex='0' aria-haspopup='false' data-tooltip='Settings' aria-label='Settings'>
                    Pop Out
                </div>
                <div id=':px:gs:m' class='dpxp' role='menu' aria-haspopup='true' >
                    <ul id=':px:gs:m:l' class='dvml'>
                        <li>Notifications</li>
                        <li>Profile</li>
                        <li>Settings</li>
                    </ul>
                </div>
                <div id=':px:gs:tt' class='dtt' >
                    ComboBox
                </div>
            </div>
            <div class='dpw'>
                <div id=':F:b:s' class='dpob' role='combobox' tabindex='0' aria-haspopup='false'>
                    <div id=':F:b:s:o' class='dpos'>
                        Select a value..
                    </div>
                    <div...

CSS

/* Document Block Wrap */
.ddbw{ margin: 1% 0 0 0; padding: 0; width: 100%; min-width: 512px; height: auto; display: block; overflow: hidden; z-index: 1; }

/* Document ToolTip */
.dtt{ margin: 0; padding: 0 4px; bottom: -50%; position: absolute; width: auto; height: auto; min-height: 17px; display: none; background-color: #000; color: #fff !important; font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; font-weight: 600; font-size: 0.5em; text-align: center; text-decoration: none !important; overflow: visible; z-index: 723; }

/* Single Block */
.dsb{ margin: 0 1% 0 1%; padding: 0; width: auto; min-width: 384px; height: auto; display: block; float: none; box-sizing: border-box; }

/* Dual - left Block & right Block */
.ddlb{ margin: 0 1% 0 1%; padding: 0; width: 48%; min-width: 192px; height: auto; display: block; float: left; box-sizing: border-box; }
.ddrb{ margin: 0 1% 0 1%; padding: 0; width: 48%; min-width: 192px; height: auto; display: block; float: right; box-sizing: border-box; }

/* Triple - left, middle, & right Block */
.dtlb{ margin: 0 1% 0 1%; padding: 0; width: 31%; min-width: 96px; height: auto; display: inline-block; float: left; box-sizing: border-box; }
.dtmb{ margin: 0 1% auto; padding: 0; width: 31%; min-width: 96px; height: auto; display: inline-block; float: none; box-sizing: border-box; }
.dtrb{ margin: 0 1% 0 1%; padding: 0; width: 31%; min-width: 96px; height: auto; display: inline-block; float: right; box-sizing: border-box; }

/* Quad - left, middles, & right blocks */
.dqlb{ margin: 0 1% 0 1%; padding: 0; width: 23%; min-width: 64px; height: auto; display: inline-block; float: left; box-sizing: border-box; }
.dqmb{ margin: 0 1% 0 1%; padding: 0; width: 22%; min-width: 64px; height: auto; display: inline-block; float: center; box-sizing: border-box; }
.dqrb{ margin: 0 1% 0 1%; padding: 0; width: 23%; min-width: 64px; height: auto; display: inline-block;...

JavaScript

var fBlue = jQuery( document.getElementById( ':F:b:f' ) );
var aRed = jQuery( document.getElementById( ':F:b:a' ) );
var sGrey = jQuery( document.getElementById( ':F:b:st' ) );
var cBox = jQuery( document.getElementById( ':px:gs' ) );
var sBox = jQuery( document.getElementById( ':F:b:s' ) );
var lBox = jQuery( document.getElementById( ':F:b:s:o:l' ) );
var oBox = jQuery( document.getElementById( ':F:b:s:o' ) );

fBlue.on( "mouseover", function( event )
     {
         jQuery( document.getElementById( ':F:b:f:tt' ) ).show();
     }
    );

fBlue.on( "mouseout", function( event )
     {
         jQuery( document.getElementById( ':F:b:f:tt' ) ).hide();
     }
    );

aRed.on( "mouseover", function( event )
     {
         jQuery( document.getElementById( ':F:b:a:tt' ) ).show();
     }
    );

aRed.on( "mouseout", function( event )
     {
         jQuery( document.getElementById( ':F:b:a:tt' ) ).hide();
     }
    );

sGrey.on( "mouseover", function( event )
     {
         jQuery( document.getElementById( ':F:b:st:tt' ) ).show();
     }
    );

sGrey.on( "mouseout", function( event )
     {
         jQuery( document.getElementById( ':F:b:st:tt' ) ).hide();
     }
    );

cBox.on( "click", function( event )
     {
         jQuery( document.getElementById( ':px:gs:m' ) ).toggle
         ( 
             function()
             {
                 jQuery( document.getElementById( ':px:gs:m' ) ).animate( { height: jQuery( ':px:gs:m:l' ).height() },200);
              },
             function()
             {
                jQuery( document.getElementById( ':px:gs:m' ) ).animate( { height: "auto" },200);    
             } 
         );
     }
    );

cBox.on( "mouseover", function( event )
     {
         jQuery( document.getElementById( ':px:gs:tt' ) ).show();
     }
    );

cBox.on( "mouseout", function( event )
     {
         jQuery( document.getElementById( ':px:gs:tt' ) ).hide();
     }
    );

sBox.on( "click", function( event )
     {
         if( lBox.is(...