Skip to content

Instantly share code, notes, and snippets.

@DeviaVir

DeviaVir/dabblet.css

Created September 17, 2012 20:36
Show Gist options
  • Save DeviaVir/3739634 to your computer and use it in GitHub Desktop.
Save DeviaVir/3739634 to your computer and use it in GitHub Desktop.
Download ZIP
Horizontally centered floated elements
Raw
dabblet.css
/**
* Horizontally centered floated elements
*/
* {
margin: 0;
}
html, body {
background: #f4f4f4;
min-height: 100%;
}
.container {
border: #ccc 1px solid;
position: relative;
margin: 30px 0;
overflow: hidden; /* Or use clearfix */
}
.float_container {
float: right;
position: relative;
left: -50%;
}
ul {
list-style: none;
margin: 0;
position: relative;
top: 0;
left: 50%;
text-align: center;
}
li {
height: 26px;
background: #e6e6e6;
border: #ccc 1px solid;
float: left;
font-weight: bold;
line-height: 25px;
margin: 0 0 0 -1px;
padding: 1px 1px 0;
position: relative;
vertical-align: middle;
}
a {
background: #ddd;
color: #333;
display: block;
padding: 1px 20px 0 20px;
text-decoration: none;
text-shadow: 0 1px 1px #fff;
white-space: nowrap;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<div class="float_container">
<ul>
<li>
<a href="#">Chase</a>
</li>
<li>
<a href="#">Sillevis</a>
</li>
</ul>
</div>
</div>
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment