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="wrapper">
    <div class="block red"></div>
       </div>
    
     
       <div class="wrapper">
 <div class="block orange" >
      </div> 
       </div>
      
    
    
      <div class="wrapper">
     <div class="block yellow"></div>
    </div>
    
    <div class="clear"></div>
    
      <div class="wrapper">
     <div class="block green"></div>
      </div>
      
    <div class="wrapper">
      
     <div class="block lime">
      </div></div>
   
    
    <div class="wrapper">
     
        <div class="block blue"></div></div>
    
     <div class="clear"></div>
  
    <div class="wrapper">
     
        <div class="block cyan"></div></div>
      
    <div class="wrapper">
      
        <div class="block pink"></div></div>
    
    <div class="wrapper">
     
        <div class="block violet"></div></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