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 name="description" content="[soluton to the inner div problemdescription]" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="socialcontainer">
    <div id="control-position">
      <div class="facebook"><a href="https://facebook.com/"></a></div>
      <div class="twitter"><a href="https://twitter.com/"></a></div>
      <div class="google"><a href="https://google.com/"></a></div>
      <div class="linkedin"><a href="https://linkedin.com/"></a></div>
    </div>  
</div>
</body>
</html>
 
#socialcontainer {
width: 100%;
margin: 0 auto;
text-align: center;
border:1px solid red;
overflow:hidden;
}
​
#control-position{
border:1px solid blue;
margin: 0 auto;  
  overflow:hidden;
  width:271px;
​
}
​
​
.facebook a {
height:64px;
width:64px;
display: inline-block;
background: url('http://dummyimage.com/64x64');
float:left;
  margin-right:5px;
}
​
.facebook a:hover {
background: url('http://dummyimage.com/64x64/000/fff');
}
​
.twitter a {
height:64px;
width:64px;
display: inline-block;
background: url('http://dummyimage.com/64x64');
float:left;
  margin-right:5px;
}
​
​
.twitter a:hover {
    background: url('http://dummyimage.com/64x64/000/fff');
}
​
.google a {
height:64px;
width:64px;
display: inline-block;
background: url('http://dummyimage.com/64x64');
  float:left;
  margin-right:5px;
}    
​
.google a:hover {
    background: url('http://dummyimage.com/64x64/000/fff');
}
​
.linkedin a {
height:64px;
width:64px;
display: inline-block;
background: url('http://dummyimage.com/64x64');
  float:left;
 
}
​
.linkedin a:hover {
    background: url('http://dummyimage.com/64x64/000/fff');
}
Output

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

Dismiss x
public
Bin info
ahsanpervaizpro
0viewers