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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="container">
    <div class="floated">
        <p class="desc">This is some description</p>
        <p class="link">This is a link</p>
    </div>
    <div class="floated">
        <p class="desc">This is some description that is really long, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
        <p class="link">This is a link</p>
    </div>
    <div class="floated">
        <p class="desc">This is some description which is just long enough not to fit to one line.</p>
        <p class="link">This is a link that is longer than the other ones and does not fit onto one line</p>
    </div>
</div>
  
</body>
</html>
 
#container {
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
  display:table;
  position:relative;
  background:#eee;
}
.floated {
  position:relative;
  display:table-cell;
  width: 300px; 
  padding-bottom:45px;
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
  background:#ddd;
}
.desc{ }
.link{
  position:absolute;
  display:block;
  bottom:0px;
  width:33%;
  height:45px;
  color: #e31500;
  text-decoration: underline;
  font-size: 12px;
  font-weight: bold;
}
 
​
Output

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

Dismiss x
public
Bin info
roXonpro
0viewers