There are thousands of types of layouts for your webpages. Types of layout techniques include CSS, grid, float, flex, and fixed. I am not an expert on layouts. The layout I have chosen was developed in 2006 by Matthew Levine and others. They called it the 3 Column Grail Website. A detailed article on how it was developed is at https://alistapart.com/article/holygrail/. It consists of three columns, a header, and a footer. For a three column website, it is as simple as it gets. I have listed the basic code for the website as seen above. You can copy and paste the code into your index.html page, and start modifying it. When you are ready to develop your own layouts you may want to try https://jsfiddle.net.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="160 character description">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Author name">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
font: normal 16px/1.5em helvetica, arial, sans-serif;
}
#pborder {border-style: ridge;
}
#hcenter {text-align: center;
font-size: 50px;
}
#imgcenter {
display: block;
margin-left: auto;
margin-right: auto;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
overflow: hidden;
}
#container .column {
position: relative;
float: left;
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#header {
background-color: crimson;
height: 100px;
vertical-align: center;
padding-top: 6px;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
background-color: #e6f9ff;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
background-color: rgb(193, 161, 223);
}
#footer {
clear: both;
position: relative;
background-color: burlywood;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}
</style>
</head>
<body>
<div id="header">
<h2 id="hcenter">Header</h2>
</div>
<div id="container">
<div id="center" class="column">
<h2>Center Column</h2>
<p>This is some random text to test the font.</p>
</div>
<div id="left" class="column">
<br><h2>Left Column</h2>
<p><a href="page.html">Visit Page</a>
<br><a href="page.html">Visit Page</a>
</p>
</div>
<div id="right" class="column">
<br><h2>Right Column</h2>
</div>
</div>
<div id="footer">
<h>Footer</h>
</div>
</body>
</html>
Here is a link to a webpage for the code above. Link to 3-Column-Best. Remember you can always right click on the webpage to see the source code.
Now we will now discuss the grail webpage above. We will not go into detail on the layout. We will describe the style selectors.
The first CSS selector to look at is:
body {
It is a CSS Type selector. It applies to the entire body (between the start body tag and end body tag)
the min-width and the font are described. This CSS body selector is linked to the html body tags. Notice the layout CSS comment to the side. It describes how the 630px was arrived at. LC is Left Column; RC is Right Column; CC is Center Column.
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
font: normal 16px/1.5em helvetica, arial, sans-serif;
}
The next CSS selector to look at is:
#pborder {border-style: ridge;
Remember that the # sign means this is a CSS ID selector. It puts a border around a paragraph. We do not call this selector in the HTML code. It is extra, but does not hurt anything.
}
The next CSS selector is:
#hcenter {text-align: center;
It is also a CSS ID selector. It aligns the text and chooses the font size for the header. In the HTML you will see id="hcenter".
font-size: 50px;
}
The next CSS selector is:
#imgcenter {
It is also a CSS ID selector. It centers an image. It is extra, but does not hurt anything.
display: block;
margin-left: auto;
margin-right: auto;
}
The next CSS selector is:
#container {This is a CSS ID selector. In the HTML you will see id="container". This is part of the layout code. See the link to A List Apart article https://alistapart.com/article/holygrail/.
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
overflow: hidden;
}
The next CSS selector is:
#container .column {
This a combination of selectors. The first selector, #container, is a CSS ID selector. The second selector, .column, is a CSS Class selector. In the HTML you will see several references to column, such as class="column". You have seen the term padding. Padding is simply the space between the contents of an element and its border. For example, padding: 10px 20px; means you have a top and bottom padding of 10px, and a right and left padding of 20px. Margins control the gap between boxes. Of course anytime you see background-color, it can easily be changed to any color you want.
position: relative;
float: left;
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
The last CSS selector we will discuss is a little further down the style section.
/*** IE Fix ***/
The first line is an HTML comment that says what follows is a fix for the Internet Explorer browser. The * signifies a CSS Universal selector.
* html #left {
left: 150px; /* RC fullwidth */
}
We will not go into any more detail on the CSS styles. As you can see layout knowledge can be complex. Find a layout you like and plug in your content. It is how this website was created. For more information on CSS styles and HTML you can visit www.3schools.com. The book HTML&CSS design and build websites has also been useful to me as a reference.
Home Page
Visual Studio Code
Simple Webpage
Website Structure
Webpage Layout
HTML Escape
Web Hosting
FTP
Using Paint 3D
Printer Friendly
