Skip to content

Instantly share code, notes, and snippets.

@wilornel

wilornel/gist:3766437

Created September 22, 2012 14:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wilornel/3766437 to your computer and use it in GitHub Desktop.
Save wilornel/3766437 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<head>
<style type="text/css">
#main{
width:1000px;
height:100%;
border:1px solid black;
margin-left:auto;
margin-right:auto;
position:relative;
}
#dock{
position:absolute;
bottom:0px;
background-color:gray;
width:1000px;
height:200px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#filler{
height:125px;
}
#container{
width:50%;
display:inline-block;
margin-left:auto;
margin-right:auto;
}
.icon{
border:1px solid black;
background-color:yellow;
height:50px;
display:inline-block;
position:absolute; /* They stick to the bottom, but stack on top of eachother... */
bottom:0px;
}
</style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script>
<script>
$(document).ready(function(){
widVar = $('.icon').height(); // This just makes the width equal to the height
$('.icon').css({width: widVar});
});
</script>
<body>
<div id='main'>
<div id="dock">
<div id='filler'></div>
<div id='container'>
<div id='img1' class='icon'></div>
<div id='img2' class='icon'></div>
<div id='img3' class='icon'></div>
<div id='img4' class='icon'></div>
<div id='img5' class='icon'></div>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment