Skip to content

Instantly share code, notes, and snippets.

@dandenney

dandenney/dabblet.css

Created December 30, 2011 18:51
Show Gist options
  • Save dandenney/1540994 to your computer and use it in GitHub Desktop.
Save dandenney/1540994 to your computer and use it in GitHub Desktop.
Download ZIP
The first commented line is your dabblet’s title
Raw
dabblet.css
/**
* The first commented line is your dabblet’s title
*/
.box-wrapper {
padding: 100px; }
.info {
width: 600px; }
.box {
background: #e5e5e5;
border: 1px solid #d5d5d5;
height: 300px;
position: relative;
width: 600px; }
.box p {
position: absolute; }
.top-text {
top: 10px; }
.bottom-text {
bottom: 10px; }
.left-text {
left: 10px;
top: 120px; }
.right-text {
bottom: 40px;
right: 10px; }
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="box-wrapper">
<p class="info">Once the gray box is relative, you just pick a side as a base. So, you pick up top or bottom, left or right. Then nudge accordingly. The default is top: 0, left: 0 if you don't set them.
<div class="box">
<p class="top-text">Top text</p>
<p class="bottom-text">Bottom text</p>
<p class="right-text">Right text</p>
<p class="left-text">Left text</p>
</div>
</div>
Raw
settings.json
{"view":"split","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment