Skip to content

Instantly share code, notes, and snippets.

@lvivski

lvivski/index.html

Created January 4, 2012 10:48
Show Gist options
  • Save lvivski/1559536 to your computer and use it in GitHub Desktop.
Save lvivski/1559536 to your computer and use it in GitHub Desktop.
Download ZIP
Verical align
Raw
index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Vertical align</title>
<style type="text/css">
.wrap, .h, .f {
display: inline-block;
}
/* Семантическая обёртка */
.item {
display: inline;
}
.h, .f {
width: 200px;
}
/* Шапка */
.h {
background: red;
height: 100px;
vertical-align: top;
}
/* Подвал */
.f {
background: blue;
height: 20px;
color: #fff;
vertical-align: bottom;
margin-left: -200px;
}
</style>
</head>
<body>
<span class="wrap">
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 200px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 150px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 120px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 130px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 180px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 160px">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h">header</span><span class="f">footer</span></span>
<span class="item"><span class="h" style="height: 140px">header</span><span class="f">footer</span></span>
</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment