Howto make a basic page

Solid Foundations » Howto's » Article

The reason why

I've noticed around here that a lot of people submit pages that render in one borwser, yet won't render in another. Sometimes they tell you out right that there is a problem, and other times the author doesn't even know that there is a problem. I also find that the answer to most of the problems comes down to the simple basic layout of HTML and the use of CSS to move elements around.

Now I must admit, I'm not an expert in this. Oh heavens no, there are people out there who work magic with child parent elements and selectors and what not, but, the one thing I can do is have a solid stable page written with HTML and CSS that will render the same in both Mozilla and Internet Explorer.

I have learned this style of coding over a handful of years, and I find that it consitantly renders the same way on just about every browser I've used. Now to give something back to the community, I'm going to share this with you.

The Style Sheet

The following is a style sheet that can render a close copy of this page. The style sheet will give you a title bar using an h1 element, a left navigation, a content area, and a footer. A copy of the HTML used is provided for your use.

Now I'm not too concerend about the header or the footer. Each is pretty self explantory just by looking at them, but what I want to focus on is the left navigation and the content area. These are areas where I have noticed that have the most trouble. The way this style sheet is written is in the fluid style. Genereal measurements are given in percentages, and smaller, more exact sizes are given in pixels.

body 
{
 font: normal 85% sans-serif;
}
a 
{
 color: #0000ff;
}
h1 
{
 margin: 0; 
 padding: 10px; 
 background-color: #eeeeee;
}
#toplinks 
{
 float: right;
}
#main 
{
 margin-top: 15px; 
 padding: 0;
}
#links 
{
 float: left; 
 width: 18%; 
 background-color: #eeeeee;
}
#links h3 
{
 margin: 0;
}
#content 
{
 margin-left: 20%; 
 background-color: #ffffff;
}
#content h3 
{
 margin: 0;
}
#footer 
{
 clear: both; 
 margin-top: 15px; 
 text-align: center;
}

Now lets break it down

Left Element

I'm going to start with the left navigation box. As you can tell it is floated the left. This allows other elements to flow around it. If the element was not floated you would not be able to have other elements to the right of it, which is exactly what we want to do. Now the width has been set at 18%. You need to set the width of this element, other wise it will take up 100% of the real estate to the right of it. This can cause problems in the long run because you would soon have elements overlapping each other and reacting to each other.

Content Element

Okay, we have the navigation box made and it's floating to the left of everything, now lets go and tell the content element to have a left margin just a hair more than the width of the navigation element. As you can see from the style sheet the left margin is set at 20%. This is a comfortable amount, and gives a space between the navigation element and the content element. With the left margin set larger than the width of the navigation element, the content box now pulls up and places itself to the right and looks like it now belongs there.

Last remarks

Now the footer is the only other element that is still reacting to the floating of the left navigation element. You need to tell the footer to 'clear: both' in the style sheet. This will keep the footer from being affected by floating elements and will kick the footer to the foot of the page.

Now there's nothing else that's fancy in the style sheet. I haven't set the page up to use images, ie. photos, graphics, etc. When you start to deal with those types of objects, the idea of a fluid page goes out the window.

I hope that this page will help people in the future to make good solid foundations for their creativity.