Skip to content

Instantly share code, notes, and snippets.

@JohannesMP

JohannesMP/dabblet.css

Created May 22, 2013 12:20
Show Gist options
  • Save JohannesMP/5627136 to your computer and use it in GitHub Desktop.
Save JohannesMP/5627136 to your computer and use it in GitHub Desktop.
Download ZIP
Image size test
Raw
dabblet.css
/**
* Image size test
*/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.wrapper {
width: 60%;
padding: 10px;
background-color: lightblue;
margin-bottom: 20px;
}
.content {
float:left;
width: 50%;
}
img {
max-width: 100%;
height: auto;
}
@media \0screen {
img {
width: auto; /* for ie 8 */
}
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="wrapper">
<div class="content-wrapper">
<div class="content">
Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.
</div>
</div>
<div class="content-wrapper">
<div class="content">
Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.
</div>
</div>
</div>
<div class="wrapper clearfix">
<div class="content-wrapper">
<div class="content">
Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.
</div>
</div>
<div class="content-wrapper">
<div class="content">
Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.
</div>
</div>
</div>
<div class="">
<img width='600' height='200' src='http://i.imgur.com/8xR8ZL0.png'/>
</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