Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Untitled
*{box-sizing: border-box;}
body{font-family: Arial, sans-serif;mrgi }
.container {
background: #ccc;
border: 1px solid;
}
.container:after {
content: '';
display: table;
clear:both;
}
[class^='el'] {
padding: 10px;
float: left;
width: 50%;
}
.el-1 {
background: #0cf;
}
.el-2 {
background: #0fc;
height: 50px;
}
.main {
background: #cf0;
border: 1px solid;
height: 100px;
width: 100px;
margin: 10px;
}
.big-box {
background: lightblue;
line-height:0;
}
.box{padding: 20px; background: lightgray; margin: 20px 0; width:100%; }
p {background: #eee;padding: 20px;border: 1px solid;line-height: 1.4; display:inline-block; width: 20%;vertical-align: top;/*margin-right:-5px;*/}
.ib-box{border: 1px solid; }
.bfc {overflow: hidden;}
<div class="container"> <div class="el-1">A long string of stuff here...</div> <div class="el-2">A short string of stuff here...</div>
</div>
<div class="main"> Some stuff here...</div>
<div class="big-box"><div class="box"></div><div class="box"></div></div><div class="box"></div><div class="box"></div>
<div class="ib-box">
<p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.</p><!--
--><p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.One example of a block-level element is a paragraph. If I toss two paragraphs into a HTML document, they stack on top of each other rather than appearing side by side. I have a lot of freedom over their dimensions and can really treat them as individual building blocks to shape as I please.</p>
<p>Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.Web browsers render different elements in different ways. Some elements are block-level, meaning that their default display value is set to block. Block-level elements have a definable width and height and automatically create a new row in the layout as they’re created.</p><p>One example of a block-level element is a paragraph. If I toss two paragraphs into a HTML document, they stack on top of each other rather than appearing side by side. I have a lot of freedom over their dimensions and can really treat them as individual building blocks to shape as I please.</p>
</div>
// alert('Hello world!');
{"view":"split","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
You can’t perform that action at this time.