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>JS Bin</title>
</head>
<body>
   <div class="row">
    <div class="side-bar">
        <h3> Recent Work </h3>
        <p>Here's some of my latest work, covering web design, branding and identity.</p>
        <a href="#">View the Portfolio &rarr;</a>
    </div>
​
<div class="recent-wrap">
    <a href="#"><img src="img/body-metrix.png"></a>
    <a href="#"><img src="img/body-metrix-logo.png"></a>
    <a href="#"><img src="img/market.png"></a>
</div>
</div>
</body>
</html>
 
.row {
    width: 100%;
    float: left;
}
  
.side-bar, .recent-wrap {
    float: left;
}
.side-bar {
​
    padding: 10px;
    background-color: #f3f3f3;
    height: 200px;
    width: 250px;
}
​
.side-bar h3 {
    font-weight: bold;
    font-size: 19px;
    margin-bottom: 5px;
}
​
.side-bar p {
    font-size: 14px;
​
}
​
.side-bar a {
    font-size: 13px;
}
​
​
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Output 300px

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

Dismiss x
public
Bin info
mikedidthispro
0viewers