Edit on
<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%
    
View Compiled
Rerun