Skip to content

Instantly share code, notes, and snippets.

@jklm313
Created October 28, 2013 18:02

Revisions

  1. jklm313 revised this gist Oct 28, 2013. 1 changed file with 2 additions and 4 deletions.
    6 changes: 2 additions & 4 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -17,13 +17,12 @@ html {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/‎ */
    }

    .main-col {
    width: 50%; /* whatever you want it to be but keep in mind that this + right-col's width sums up the container's width so if you give this 60% width and right-col 50%, you'll have to deal with horizontal scrollbars */

    /* you need only specify negative margin for this column since right-col already has margin-right specified */
    margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/‎ */
    margin-left: 20%;/* equal to right-col's width */

    /*demo purposes*/
    background-color: white;
    @@ -33,7 +32,6 @@ html {

    .right-col {
    width: 20%;
    margin-right: -20%; /* same as its width */

    /* demo purposes */
    background: dodgerblue;
  2. jklm313 created this gist Oct 28, 2013.
    41 changes: 41 additions & 0 deletions dabblet.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    * {
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    }

    html {
    background-color: grey;
    }

    .container {
    text-align: center;
    }

    .main-col, .right-col {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    }

    .main-col {
    width: 50%; /* whatever you want it to be but keep in mind that this + right-col's width sums up the container's width so if you give this 60% width and right-col 50%, you'll have to deal with horizontal scrollbars */

    /* you need only specify negative margin for this column since right-col already has margin-right specified */
    margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/‎ */

    /*demo purposes*/
    background-color: white;
    border: 3px dashed;
    min-height: 600px;
    }

    .right-col {
    width: 20%;
    margin-right: -20%; /* same as its width */

    /* demo purposes */
    background: dodgerblue;
    min-height: 300px;
    }
    4 changes: 4 additions & 0 deletions dabblet.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <div class='container'>
    <div class='main-col'></div>
    <div class='right-col'></div>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}