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 http-equiv="content-type" content="text/html; charset=UTF-8">
      <link href="960_12_col_fluid.css" media="screen" rel="stylesheet" type="text/css">
      <style type="text/css">
         body { background-color: #fff; }
         .container { background-color:#333; }
         .container div p { background-color:#fff; }
         div p { border:1px solid #ff0000; padding:10px; }
         h2 { color:#fff; }
      </style>
   </head>
  
<body>
<div class="container container_12">
   <h2 class="grid_12">Fluid 12 Column Grid</h2>
   <!-- pairs -->
   <div class="grid_12">
        <p>940px</p>
    </div>
    <div class="clear">&nbsp;</div>
   <div class="grid_1">
        <p>60px</p>
   </div>
   <div class="grid_11">
        <p>860px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_2">
        <p>140px</p>
   </div>
   <div class="grid_10">
        <p>780px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_3">
        <p>220px</p>
   </div>
   <div class="grid_9">
        <p>700px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_4">
        <p>300px</p>
   </div>
   <div class="grid_8">
        <p>620px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_5">
        <p>380px</p>
   </div>
   <div class="grid_7">
        <p>540px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_6">
        <p>460px</p>
   </div>
   <div class="grid_6">
        <p>460px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <!-- end pairs -->
   <!-- singles -->
   <div class="grid_1  suffix_11">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_1 suffix_10">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_2 suffix_9">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_3 suffix_8">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_4 suffix_7">
        <p>60px</p>
    </div>
    <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_5 suffix_6">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_6 suffix_5">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_7 suffix_4">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_8 suffix_3">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_9 suffix_2">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_10 suffix_1">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <div class="grid_1 prefix_11 suffix_0">
        <p>60px</p>
   </div>
   <div class="clear">&nbsp;</div>
   <!-- end singles -->
   <!-------------------------------------------------->
  <p style="font-size: 16px; color: #fff; border: none;">two outer: div class="grid_6 push_6" <=sibling=> div class="grid_6 pull_6"</p>
  <p style="font-size: 16px; color: red; border: none;">===>Fixed it!!!<===</p>
   <!-------------------------------------------------->
   <div class="grid_6 push_6">
      <div class="grid_2 alpha">
         <p>60 px, class = "grid_6 push_6" => class = "grid_2 alpha"</p>
      </div>
      <!-- end .grid_2.alpha -->
      <div class="grid_10 omega">
         <p>380px, class="grid_6 push_6" => class="grid_10 omega"</p>
        <p style="color: #fff; background: transparent; margin-top: 40px;">Pay attention at the gap between 2 rows!</p>
      </div>
      <!-- end .grid_10.omega -->
      <div class="clear">&nbsp;</div>
      <div class="grid_6 alpha">
         <p>220 px, class="grid_6 push_6" => class="grid_6 alpha"</p>
      </div>
      <!-- end .grid_6.alpha -->
      <div class="grid_6 omega">
         <p>220 px, class="grid_6 push_6" => class="grid_6 omega"</p>
      </div>
      <!-- end .grid_6.omega -->
   </div>   
   <!-- end .grid_6.push_6 -->
   <!-------------------------------------------------->
   <div class="grid_6 pull_6">
      <div class="grid_6 alpha">
         <p>220 px, class="grid_6 pull_6" => class="grid_6 alpha"</p>
      </div>
      <!-- end .grid_6.alpha -->
      <div class="grid_6 omega">
         <p>220 px, class="grid_6 pull_6" => class="grid_6 omega"</p>
      </div>
      <!-- end .grid_6.omega -->
      <div class="clear">&nbsp;</div>
      <div class="grid_2 alpha">
         <p>60 px, class = "grid_6 pull_6" => class = "grid_2 alpha"</p>
      </div>
      <!-- end .grid_2.alpha -->
      <div class="grid_10 omega">
         <p>380px, class="grid_6 pull_6" => class="grid_10 omega"</p>
      </div>
      <!-- end .grid_10.omega -->
   </div>
   <!-- end .grid_6.pull_6 -->
</div>
</body></html>
​
 
​
Output 300px

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

Dismiss x
public
Bin info
centurianiipro
0viewers