-
Notifications
You must be signed in to change notification settings - Fork 0
/
columns_automatic.html
43 lines (34 loc) · 1.97 KB
/
columns_automatic.html
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
<!DOCTYPE html>
<html>
<head>
<style>
table, td {
border: 0px solid black;
vertical-align:top;
padding: 10px;
}
table {
width: 100%
}
td {
width: 50%
}
#col1 {
background-color:indianred;
}
#col2 {
font-weight: bold;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<p> Using a two-column layout for websites is very common, and adds a bit of organization to your page. Remember that you can use an id to give them different styling or different widths.</p>
<table>
<tr>
<td id="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ex nibh, fermentum nec lacus eget, laoreet lacinia velit. Aenean sagittis vehicula eros, ac sollicitudin nunc mattis non. Praesent porttitor scelerisque dolor in scelerisque. Duis vehicula ullamcorper est, eu ultrices justo. Cras eu neque a magna lobortis fermentum quis a mauris. Cras eu placerat augue, vitae sagittis felis. Nam iaculis sapien id placerat fringilla. Sed mattis auctor suscipit. Ut vulputate porttitor lacus eu laoreet. Nulla facilisi. Quisque ultricies, tortor a bibendum ultricies, nisl ex pulvinar nisi, vitae molestie nunc tortor ut justo. Etiam rhoncus dui vitae porta ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas in feugiat libero, sed sollicitudin nunc. Nullam libero nibh, dapibus sed tellus sit amet, varius rhoncus lectus.</td>
<td id="col2">Aenean sit amet cursus tellus. Quisque a augue in nisl vehicula rhoncus. Phasellus tempor ante id auctor congue. Nunc in nisl placerat, rutrum nisl nec, ullamcorper libero. Praesent facilisis posuere enim at blandit. Sed maximus auctor tortor at pellentesque. Integer elementum pulvinar lorem, ut vestibulum massa dictum vel. Fusce turpis quam, aliquet nec fringilla eu, elementum a odio.</td>
</tr>
</table>
</body>
</html>