Skip to content

Instantly share code, notes, and snippets.

@dziudek

dziudek/dabblet.css

Created March 25, 2012 08:55
Show Gist options
  • Save dziudek/2192475 to your computer and use it in GitHub Desktop.
Save dziudek/2192475 to your computer and use it in GitHub Desktop.
Download ZIP
Method to place visual separator between table cell's without using additional HTML elements
Raw
dabblet.css
/**
* Method to place visual separator between table cell's without using additional HTML elements
*/
body > div {
display:table;
width: 600px;
}
body > div > div {
display: table-cell;
background: #eee;
height: 300px;
vertical-align: top;
position: relative;
padding: 0 60px;
}
body > div > div:before {
content: "";
position: absolute;
width: 50px;
height: 140px;
background: #a00;
left: -25px;
top: 50%;
margin-top:-70px;
}
body > div > div:first-child:before {
display:none;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div>
<div>Lorem</div>
<div>Ipsum</div>
<div>Dolor</div>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment