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 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
​
<html>
<head>
​
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
​
<style type="text/css">
  #wrapper {}
#left-column { float: left; width: 50%; }
#right-column { float: right; width: 50%; }
#list-wrap { margin: 0 auto 0 auto; padding: 40px; }
  #list-wrap ul { list-style-type: none; overflow: hidden; background: #ddd; margin: 0; padding: 0;}
  #list-wrap ul li { float: left; width: 160px; height: 160px; margin: 20px; background: #ccc;}
</style>
​
</head>
<body>
​
<div id="wrapper">
​
   <div id="left-column">
     <div id="list-wrap">
       <ul>
        <li>Dynamic content 1</li>
        <li>Dynamic content 2</li>
        <li>Dynamic content 3</li>
        <li>Dynamic content 4</li>
       </ul>
      </div><!--/list-wrap-->
   </div><!--/left-column-->
​
   <div id="right-column">
     Content
   </div><!--/right-column-->
​
   <div style="clear: both;"></div>
​
   </div><!--/wrapper-->
</body>
</html>
 
$(function() {
var availableWidth = $("#list-wrap").width();
var liWidth = $("#list-wrap ul li").outerWidth(true);
var numberOfListItem = parseInt(availableWidth/liWidth);
var newWidth = numberOfListItem*liWidth;
$("#list-wrap").width(newWidth);
});
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers