Any URL's added here will be added as
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<section> <h1>Side-By-Side Positioning Demo</h1> <div class="ib">These two divs are positioned next to one another using <code>display: inline-block</code></div> <div class="ib">Notice the space between them. It occurs because of my carriage return in the HTML which I've used to keep the code organized. I've used a reset to insure no elements should have any default margins or padding. (I did add a bottom margin to make it easier to read.) This space is actually a space character rendered just as it would be between two inline elements.</div> <br /> <div class="float">These two are positioned using <code>float: left.</code></div> <div class="float">You can see that, even though the elements are spaced in the code, the space is not actually rendered on the page. This may not be a huge deal in these first examples, but...</div> <br /> <div class="ib half">What if I want my side-by-side elements to take up the full width of the parent element? I can set the width of each to 50%, right?</div> <div class="ib half">Wrong! Because, together, the two inline block elements will add up to 100% of the available width, but that doesn't account for the space between.</div> <br /> <div class="float half">If I do the same thing with floated elements...</div> <div class="float half">The two elements are side-by-side just as I intended and fill the entire width of the parent (which, in this case, is the same as the width of the viewport.</div> </section>
@import compass // These styles are not pertinent to the demo. They are // merely aesthetic. body background: lightgray section background: white width: 80% padding: 1em overflow: auto min-width: 30em max-width: 50em margin: auto h1 font-size: 3em margin-bottom: 0.5em font-family: sans-serif code font-family: monospace font-size: 0.85em background: hsla(0, 0, 100, 0.7) border: hsla(0, 0, 0, 0.3) solid 1px padding: 0.1em vertical-align: baseline // Default div styling div // These styles are for aesthetics only. font-size: 18px line-height: 1.3em vertical-align: top margin-bottom: 1em border-radius: 0.5em padding: 1em // This insures everything up to the border // is included in the width box-sizing: border-box // The default width of my divs width: 45% // Inline-block aligned elements .ib // These are aesthetic styles. Red = bad background: salmon border: solid red 1px // Overrides default display (which would be block) display: inline-block // Float aligned elements .float // These are aesthetic styles. Red = bad background: lightgreen border: solid green 1px // Floated for positioning float: left // These elements are intended to be half the width of their // parents .half width: 50%
Also see: Tab Triggers