Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
​
  <meta charset=utf-8>
    
  <title>CSS floats prototype</title>
    
  <style>
    
  body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    }
 
  .box {
    background-color: #EEE;
    border: 2px dashed #CCC;
    margin-right: 2%;
    margin-bottom: 3%;
    padding: 0 2%;
    width: 27.3%; 
    float: left;
    }
    
    /* The width is just a guesstimation. (Total width is
    left and right padding + left and right margin + given width +
    left and right border width. Because the border width is in px,
    and other widths are in percentages, that's why the numbers are a
    bit off. */
 
  .box:nth-of-type(3n+3) {
    background-color: yellow;
    margin-right:0; /* Take off the margin on the last box in the row */
    }
  
  .box:nth-of-type(3n+4) {
    background-color: cyan; /* Just to highlight the one we're targeting */
      clear: both; /* Force it to start on a "new line" */
    }
  
  @media (max-width:600px)  {
    
    /* 
    Linearises the content if the viewport width 
    is less than the max-width.
    */
    
    .box {
      width: 95%;
      clear: both;
    }
​
  }
          
  </style>
​
</head>
  
<body>
  
  <h1>Floats prototype</h1>
  
  <p>This is an example of how you can use CSS floats to make prototypes. Layout linearises at 600px.</p>
  <p><small>Author: <a href="http://maban.co.uk">Anna Debenham</a>. Please share this code under Creative Commons.</small></p>
  <!-- Unsemantic classnames used to make it clear what's going on. -->
​
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  
  <div class="box">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
  </div>
  
  <div class="box">
    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
  </div>
  
  <div class="box">
    <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
  </div>
  
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  
  <div class="box">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
  </div>
  
  <div class="box">
    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
  </div>
  
  <div class="box">
    <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
  </div>
  
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
  
  <div class="box">
    <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
  </div>
  
  <div class="box">
    <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
  </div>
  
  <div class="box">
    <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
  </div>
   
</body>
​
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers