Tag Archives: Blank HTML Document With Left Nav

Blank HTML Document With Left Nav

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content.

001 <!DOCTYPE html>
002
003 <head>
004
005 <meta charset="utf-8" />
006
007
008
009     <title>My Web Page</title>
010
011
012
013     <style type="text/css">
014
015         * { margin: 0; padding: 0; }
016
017
018
019         html { height:100%; }
020
021
022
023         body {
024
025         text-align: left;
026
027         width: 100%;
028
029         height: 100%;
030
031         font-size: 62.5%;
032
033         font-family: Helvetica, arial, sans-serif;
034
035         color: #000;
036
037         background: #fff;
038
039         margin: 0;
040
041         border: 0;
042
043         padding: 0; }
044
045
046
047         a { color:#007ca5; text-decoration:none; outline: none; }
048
049         a:visited { color:#666; }
050
051         a:active { color:#999; }
052
053
054
055         .left_col a { color:#fff; text-decoration: none; outline: none; }
056
057         .left_col a:hover { color:#fff; text-decoration: underline; outline: none; }
058
059         .left_col a:visited { color:#fff; }
060
061         .left_col a:active { color:#fff; }
062
063
064
065
066
067         img, a img { border-style: none; }
068
069
070
071         h1, .h1 { font-size: 2.4em; }
072
073         h2, .h2 { font-size: 2em; } /* 20pt */
074
075         h3, .h3 { font-size: 1.8em; } /* 18pt */
076
077         h4, .h4 { font-size: 1.6em; } /* 16pt */
078
079         h5, .h5 { font-size: 1.4em; } /* 14pt */
080
081         h6, .h6 { font-size: 1.1em; } /* 11pt */
082
083
084
085         .small { font-size: .9em; }
086
087
088
089         .clearer { clear:both; }
090
091
092
093         .header {
094
095             text-align: left;
096
097             background: #4f0f00;
098
099             color: #fff;
100
101             width: 980px;
102
103             margin: 0 0 0 0;
104
105             border: 0;
106
107             padding: 10px;
108
109             overflow: hidden;
110
111             }
112
113
114
115         .left_col {
116
117             text-align: left;
118
119             float: left;
120
121             background: #007ca5;
122
123             color: #fff;
124
125             width: 160px;
126
127             height: 600px;
128
129             margin: 0 0 0 0;
130
131             border: 0;
132
133             padding: 10px;
134
135             overflow: hidden;
136
137             }
138
139
140
141         .main_col {
142
143             text-align: left;
144
145             float: right;
146
147             background: #fff;
148
149             color: #000;
150
151             width: 800px;
152
153             height: 600px;
154
155             margin: 0 0 0 0;
156
157             border: 0;
158
159             padding: 10px;
160
161             overflow: hidden;
162
163             }
164
165
166
167         .footer {
168
169             text-align: left;
170
171             background: #eceae1;
172
173             color: #000;
174
175             width: 980px;
176
177             margin: 0 0 0 0;
178
179             border: 0;
180
181             padding: 10px;
182
183             overflow: hidden;
184
185             }
186
187
188
189         .wrapper {
190
191             text-align: center;
192
193             width: 1000px;
194
195             margin-left: auto;
196
197             margin-right: auto;
198
199             }
200
201
202
203
204
205     </style>
206
207
208
209 </head>
210
211 <body>
212
213
214
215     <div class="wrapper">
216
217
218
219         <div class="header">
220
221
222
223             <br />
224
225             <h1>Header content goes here</h1>
226
227
228
229             (980px wide + 10px padding)
230
231
232
233             <br /><br />
234
235
236
237         </div>
238
239
240
241
242
243         <div class="left_col">
244
245
246
247             <h5>Left column content goes here</h5>
248
249
250
251             (160px wide + 10px padding)
252
253
254
255         </div>
256
257
258
259         <div class="main_col">
260
261
262
263             <h2>Main content goes here</h2>
264
265             (800px wide + 10px padding)
266
267
268
269         </div>
270
271
272
273
274
275         <br class="clearer" /">
276
277
278
279
280
281         <div class="footer">
282
283
284
285             <span class="small">
286
287                 Tiny footer content goes here
288
289                 <br />
290
291
292
293                 (980px wide + 10px padding)
294
295             </span>
296
297
298
299         </div>
300
301
302
303     </div>
304
305
306
307 </body>
308
309 </html>

Blank HTML Document With Left Nav

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content.

001 <!DOCTYPE html>
002
003 <head>
004
005 <meta charset="utf-8" />
006
007
008
009     <title>My Web Page</title>
010
011
012
013     <style type="text/css">
014
015         * { margin: 0; padding: 0; }
016
017
018
019         html { height:100%; }
020
021
022
023         body {
024
025         text-align: left;
026
027         width: 100%;
028
029         height: 100%;
030
031         font-size: 62.5%;
032
033         font-family: Helvetica, arial, sans-serif;
034
035         color: #000;
036
037         background: #fff;
038
039         margin: 0;
040
041         border: 0;
042
043         padding: 0; }
044
045
046
047         a { color:#007ca5; text-decoration:none; outline: none; }
048
049         a:visited { color:#666; }
050
051         a:active { color:#999; }
052
053
054
055         .left_col a { color:#fff; text-decoration: none; outline: none; }
056
057         .left_col a:hover { color:#fff; text-decoration: underline; outline: none; }
058
059         .left_col a:visited { color:#fff; }
060
061         .left_col a:active { color:#fff; }
062
063
064
065
066
067         img, a img { border-style: none; }
068
069
070
071         h1, .h1 { font-size: 2.4em; }
072
073         h2, .h2 { font-size: 2em; } /* 20pt */
074
075         h3, .h3 { font-size: 1.8em; } /* 18pt */
076
077         h4, .h4 { font-size: 1.6em; } /* 16pt */
078
079         h5, .h5 { font-size: 1.4em; } /* 14pt */
080
081         h6, .h6 { font-size: 1.1em; } /* 11pt */
082
083
084
085         .small { font-size: .9em; }
086
087
088
089         .clearer { clear:both; }
090
091
092
093         .header {
094
095             text-align: left;
096
097             background: #4f0f00;
098
099             color: #fff;
100
101             width: 980px;
102
103             margin: 0 0 0 0;
104
105             border: 0;
106
107             padding: 10px;
108
109             overflow: hidden;
110
111             }
112
113
114
115         .left_col {
116
117             text-align: left;
118
119             float: left;
120
121             background: #007ca5;
122
123             color: #fff;
124
125             width: 160px;
126
127             height: 600px;
128
129             margin: 0 0 0 0;
130
131             border: 0;
132
133             padding: 10px;
134
135             overflow: hidden;
136
137             }
138
139
140
141         .main_col {
142
143             text-align: left;
144
145             float: right;
146
147             background: #fff;
148
149             color: #000;
150
151             width: 800px;
152
153             height: 600px;
154
155             margin: 0 0 0 0;
156
157             border: 0;
158
159             padding: 10px;
160
161             overflow: hidden;
162
163             }
164
165
166
167         .footer {
168
169             text-align: left;
170
171             background: #eceae1;
172
173             color: #000;
174
175             width: 980px;
176
177             margin: 0 0 0 0;
178
179             border: 0;
180
181             padding: 10px;
182
183             overflow: hidden;
184
185             }
186
187
188
189         .wrapper {
190
191             text-align: center;
192
193             width: 1000px;
194
195             margin-left: auto;
196
197             margin-right: auto;
198
199             }
200
201
202
203
204
205     </style>
206
207
208
209 </head>
210
211 <body>
212
213
214
215     <div class="wrapper">
216
217
218
219         <div class="header">
220
221
222
223             <br />
224
225             <h1>Header content goes here</h1>
226
227
228
229             (980px wide + 10px padding)
230
231
232
233             <br /><br />
234
235
236
237         </div>
238
239
240
241
242
243         <div class="left_col">
244
245
246
247             <h5>Left column content goes here</h5>
248
249
250
251             (160px wide + 10px padding)
252
253
254
255         </div>
256
257
258
259         <div class="main_col">
260
261
262
263             <h2>Main content goes here</h2>
264
265             (800px wide + 10px padding)
266
267
268
269         </div>
270
271
272
273
274
275         <br class="clearer" /">
276
277
278
279
280
281         <div class="footer">
282
283
284
285             <span class="small">
286
287                 Tiny footer content goes here
288
289                 <br />
290
291
292
293                 (980px wide + 10px padding)
294
295             </span>
296
297
298
299         </div>
300
301
302
303     </div>
304
305
306
307 </body>
308
309 </html>