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>footer alignment</title>
  <style type="text/css">
    
    .block {
       box-shadow:
        inset 0 1px white,
    inset 0 -1px 3px white;
      
      -moz-box-shadow:
        inset 0 1px white,
    inset 0 -1px 3px white;
      
      -webkit-box-shadow:
        inset 0 1px white,
    inset 0 -1px 3px white;
      
      
       border-radius: 5px; 
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;  
    }
    
.red {
  background:red;
      width:70px;
      height:40px;
}
​
.orange {
  background:orange;
      width:50px;
      height:90px;
}
​
.yellow {
  background:yellow;
      width:30px;
      height:70px;
}
​
​
​
.green {
  background:green;
      width:70px;
      height:90px;
}
​
.lime {
  background:lime;
      width:90px;
      height:50px;
}
​
.blue {
  background:blue;
      width:90px;
      height:90px;
}
​
.cyan {
  background:cyan;
      width:50px;
      height:50px;
}
​
.pink {
  background:pink;
      width:90px;
      height:90px;
}
​
.violet {
  background:violet;
      width:60px;
      height:95px;
}
​
    
    
  </style>
  
</head>
<body>
  <footer>
     
    <div class="block red"></div>
     <div class="block orange"></div>
     <div class="block yellow"></div>
    
  <div class="clear"></div>
    <div class="clear-first"></div>
    
    
     <div class="block green"></div>
     <div class="block lime"></div>
     <div class="block blue"></div>
    
     <div class="clear"></div>
      <div class="clear-first"></div>
  
    
     <div class="block cyan"></div>
     <div class="block pink"></div>
     <div class="block violet"></div>
​
     
  </footer>
</body>
</html>
Output 300px

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

Dismiss x
public
Bin info
dmkimpro
0viewers