Skip to content

Instantly share code, notes, and snippets.

@hectorrios

hectorrios/dabblet.css

Created March 9, 2013 10:17
Show Gist options
  • Save hectorrios/5123740 to your computer and use it in GitHub Desktop.
Save hectorrios/5123740 to your computer and use it in GitHub Desktop.
Download ZIP
More fun with positioning
Raw
dabblet.css
/**
* More fun with positioning
*/
div#page-wrap {
width: 700px;
margin: 25px auto;
border:1px dashed black;
background-color: rgba(0,0,0,0.5);
/* height:600px; */
display:inline-block;
}
.outer-outer {
background-color:aqua;
display:inline-block;
}
.outer-div {
float:right;
position:relative;
clear:both;
background-color:red;
}
.sibling {
width:100px;
height:100px;
background-color:brown;
display:inline-block;
}
.box-three {
width:300px;
background-color:#fbeac3;
border: 6px solid #534515;
position: relative;
float:right;
top:40px;
display:inline-block;
}
.box-three > .inside {
padding: 0 20px;
display:inline-block;
position:absolute;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div id="page-wrap">
<div class="box-three">
<div class="inside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim
id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim
id est laborum.
</p>
</div>
</div>
<div class="outer-outer">
<div class="outer-div">
<div class="inner-div">
<button>Left Button</button>
<button>Right Button</button>
</div>
</div>
</div>
</div>
<div class="sibling">
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment