iarc13.github.io/ex2.html at master · iarc13/iarc13.github.io · 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
<!DOCTYPE html>

<head>
	<style>
		header{
			background-color: #0ff;
			padding: 25px;
			text-align: center;
			margin: 10px;
		}
		.side{
		background-color: #8fff77;
		width: 25%;
		height: 500px;
		float: left;
		text-align: center;

		}
		.main{
			background-color: #ff0;
			height: 340px;
			text-align: center;
			vertical-align: middle;
		}
		.extra{
		background-color: #888;
		padding: 25px;
		text-align: center;
		}
		footer{
			background-color: #f80;
			padding: 25px;
			text-align: center;
			margin: 10px;
		}


	</style>
</head>

<body>

	<header> <strong>Header</strong>  <br>

			This is some heading. What happens if the line is crossed?There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. <strong> Seems centered vertically...<br>-->Header is centered vertically by default?</strong>

	</header>

	<div class="side"> <strong>Sidebar </strong>

	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
	</p>
</div>

	<div class="main"> Main Content
		<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.<strong> I used height with this block, not padding. Why is this not centered vertically? I tried vertical-align..didn't work. </strong>
		</p>
		</div>
	<div class="extra"> Extra Content
		<p>
			The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. <strong> There is no need to center the text vertically when padding is used.  </strong>
	</p>
	 </div>

	<footer> Footer
		<br>
					The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form
 </footer>

</body>