css-equal-height/index.html at master · hongkiat/css-equal-height · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS Equal Height - Hongkiat.com</title>

<!--  jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.js"><\/script>')</script>

<!-- demo scripts -->
<link rel="stylesheet" href="css/style.css">
<!-- nav script -->
<script src="../_nav/js/nav.js" type="text/javascript"></script>
</head>

<body>
<!-- nav meta -->
<div class="demo-meta">
	<h1 class="demo-title">CSS Equal Height</h1>
	<p class="demo-desc">Achieving equal column height using only CSS</p>
</div>

<!-- demo content -->
<div class="wrapper">

<section class="unequal">

<h2>Unequal Height</h2>

<div class="container clearfix">
	<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi.Donec sed bibendum ante.</div>

	<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>
</div>
<pre>
.main, .sidebar {
	float: left;
	padding: 20px;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
	background-color: Tomato;
}
</pre>
</section>

<section class="faux">
<h2>Faux Column</h2>
<div class="container clearfix">
	<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>

	<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>
</div>
<pre>
.main, .sidebar {
	float: left;
	padding: 20px;
}
.container {
	background-color: Tomato;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
}
.sidebar {
	width: 200px;
}
</pre>
</section>

<section class="table clearfix">
<h2>CSS Table</h2>
<div class="container clearfix">
	<div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>

	<div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>
</div>
</section>
<pre>
.main, .sidebar {
	float: none;
	padding: 20px;
	vertical-align: top;
}
.container {
	display: table;
}
.main {
	width: 400px;
	background-color: LightSlateGrey;
	display: table-cell;
}
.sidebar {
	width: 200px;
	display: table-cell;
	background-color: Tomato;
}
</pre>

</div>

</body>
</html>