Skip to content

Instantly share code, notes, and snippets.

@naresh-io

naresh-io/dabblet.css

Last active July 15, 2016 12:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naresh-io/ef4d3e77132954bfb80cb48ca2751262 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naresh-io/ef4d3e77132954bfb80cb48ca2751262 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. naresh-io revised this gist Jul 15, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    * {
    width: 95%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    }
  2. naresh-io revised this gist Jul 15, 2016. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,7 @@
    * {
    padding: 0px;
    margin: 0px;
    width: 95%;
    padding: 0;
    margin: 0 auto;
    }
    .wrapper {
    width: 100%;
  3. naresh-io revised this gist Jul 15, 2016. No changes.
  4. naresh-io created this gist Jul 15, 2016.
    47 changes: 47 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,47 @@
    * {
    padding: 0px;
    margin: 0px;
    }
    .wrapper {
    width: 100%;
    height: 280px;
    background-color: black;
    }
    .div1, .div2, .div3, .div4, .div5 {
    width: 200px;
    height: 100px;
    background-color:white;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    border: 10px solid green;
    margin: 5px;
    float: left;
    overflow: auto;
    position: relative;
    }
    .subdiv {
    width: 70px;
    height: 70px;
    background-color:white;
    text-align: center;
    vertical-align: middle;
    line-height: 70px;
    border: 10px solid blue;
    margin: 5px;
    float: left;
    display: inline-block;
    }
    .diff {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
    height: 70px;
    background-color:white;
    text-align: center;
    vertical-align: middle;
    line-height: 70px;
    border: 10px solid red;
    margin: 5px;
    }
    25 changes: 25 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,25 @@
    <div class="wrapper">
    <div class="div1">Div - 1</div>
    <div class="div2">Div - 2
    <div class="subdiv">Div - 21</div>
    <div class="diff">Div - 22</div>
    </div>
    <div class="div2">Div - 3
    <div class="subdiv">Div - 31</div>
    <div class="subdiv">Div - 32</div>
    <div class="diff">Div - 33</div>
    </div>
    <div class="div4">Div - 4
    <div class="subdiv">Div - 41</div>
    <div class="subdiv">Div - 42</div>
    <div class="subdiv">Div - 43</div>
    <div class="diff">Div - 44</div>
    </div>
    <div class="div5">Div - 5
    <div class="subdiv">Div - 51</div>
    <div class="subdiv">Div - 52</div>
    <div class="subdiv">Div - 53</div>
    <div class="subdiv">Div - 54</div>
    <div class="diff">Div - 54</div>
    </div>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}