Web Site
Developers
Structure Web Pages with DIV Tags
A Few Words of Introduction
First the stress here is on a very focused treatment of the <div> tags and their associated relation with portions of code in the web page css file. One warning, some may encounter unexpected results if they test intermediate stages. Please wait, these anomalies are knowingly present. Other surprises are introduced to show how small changes can generate unexpected web page appearance. Again, discovered by accident, but useful to know their cause as well as work arounds.
Some of the working assumptions: full size monitor with a minimum of 800 x 600 resolution. Also I hope the users have good internet connection speeds and fairly good hardware.
It's not my intention to explain every move. So just resign yourself to working for a nut case, learn what you can. Afterwards, it is your decision whether to run with it or not. Lets get started.
Foundation <div> Class Code
All the code we will be inserting will be within the <body> and </body> region. So right after the aforementioned tag insert a div tag set with ample space between them:
<div class="Base">
<!-- This covers the web page, all other div tags reside within -->
... Space
</div> <!-- End of Base area -->
Next we move to the css file, but just a few words how it was done previously. Immediately after the tag name "div" would be followed by one or more style attributes[1.]. Even if every div block on a page used a common style properties, each new div tag would have to repeat the style properties. If those properties differed in one or more, the complexity of the html code could expand at a rapid rate. Contrast this with the simple naming of a class that should apply generally or an id that would more likely be a single instance of a style. The former might be applicable for the entire site. Moreover, a change or a customization of either would be localized within a single code block only in the css file. That is, you would only change that specific class or that id code in one location.
It should be obvious that setting the style within the html tags would be much more difficult to maintain. Separating appearance from page structure makes both the html and css code easier to read, write, comprehend and if need be, to debug. However, the characteristic of css code to ignore all code errors without throwing even a warning can be maddening. Nonetheless, the ability to make style changes globally is an advantage I will not give up. The option is to seach for all relevant style code, making the changes and then hoping you have made them where needed and properly. The probability of error is too large too avoid a nightmare.
Once again we concentrate our attention only on a code fragment, this time in the css file, so let's define Base class (note the period):
Note use of comments in the css file that follow C standard type, i.e.
/* This is the area we set the style for the div areas */
.Base {
...
}
Let me just feed the attributes needed between the french braces just a few at a time. First this area is to be pegged near the top of the web page. That is, its position is fixed, or locked in place at one reference point. Let's put those few attributes in the code:
/* This is the area we set the style for the div areas */
.Base {
position: absolute;
top: 10px;
left: 1px;
...
}
The positions I selected are arbitrary, it's near the top left. [Check out the help on positioning and absolute, other units may be used than pixels.] We are after full coverage of the potential web page, though we would have little idea what might be available to any individual user. However, that is really not much of a problem it we allow this area to fit the space available:
/* This is the area we set the style for the div areas */
.Base {
position: absolute;
top: 10px;
left: 1px;
width: 100%;
min-height: 520px;
...
}
/* The width is filled and the minimum height defines the smallest area
used, of course, more may be taken by the developer's demand. */
OK, one more attribute the background color that is to be common in all these Base areas that I intend it to hold on all my web pages. For now just accept my choice and use it for instructive purposes. An explanation will follow:
/* This is the area in the css file that we set the style for the div areas */
.Base {
position: absolute;
top: 10px;
left: 1px;
width: 100%;
min-height: 520px;
background-color: #0099bb;
}
It is time for a quick summary to draw attention to the use of the class operator to modify all Base areas on the web pages that comprise the supposed site we are building. Hence, every time we employ the Base class it acts as the foundation upon which the specifics of the web page is built. The take away point here is the class is a generic descriptor, whereas a more limited one we might use to over ride the usual behaviour is the id.
[I suggest putting the same background-color attribute value, shown above for the Base, into the body section of your css file to see the page color anomaly I discuss later in this article.]
Code <div> Page Structure
Trite, but true a picture many times can convey more information than words. Before diving into more <div> code, look at the figure shown below on this page. The graphic of the web page makes it is easier to see my goals in this simple design. The colored borders are just to accentuate the separate areas, actually they touch one another:
Now we see the four areas where the div structure divides the page and all sit atop the Base. The horizontal, top band that I have labeled the header uses one of several header type ids. You should recognize that in the html code, each of these block areas are embedded within the Base div tag. Look at the very end of this article to see the html skeleton code, here we will concentrate on the cascading style sheet and the class or id attributes. This time I am going to exhibit most of the pertinent lines immediately and explain them afterwards for both the html and the cascading style sheet code (a.k.a. css file):
<div id="header-something">
<!-- content goes here, we have our site name as a header that is centered.
Also logos, navigation buttons, etc. could be in this blocked off area. -->
</div"> <!-- End of banner/header block -->
This is pretty obvious, you have probably done similar code, now on to the style sheet content:
#header-something {
position: relative;
top: auto;
float: left;
width: 100%;
height: 100px;
...
background-color: #ffffff;
...
}
Look at the top three attributes and their associated values. The take away lesson here is that we have a floating block that will position itself as nearly as possible to the upper left hand corner of the web browser (that the latter's menu, buttons, etc. do not already occupy). Hence, all the free space available to the browser's edge and it is fixed at 100 px from the top of the open area within the browser, sort of like a banner band. Finally I have made this area all white. That's what you should see if you ran only this and the Base divs. I have a few other items there, however, none are really pertinent to this discussion.
Lets move across the web page in sequence from left to right with the stress being on the content in the css file. The div tags do not vary much from the one shown above for the header. Each div tag with have its own matching id that will tell it where you want them to float; the details are in the associated file (css). The details between the respective beginning and end div tag will be the differing content in each block, however, that content is your decision. Therefore, none will be shown here.
First the "left-col" will be exhibited:
#left-col {
position: relative;
float: left;
width: 22%;
height: auto;
background-color: #cccccc;
...
}
Not too much new here, but note it is much thinner than the top div block area. There are other items of potential interest, e.g. I centered the text and I put an overall size limit to the text size in this column. [We will return to the latter at the end of this article.] Other than that there is one important line not shown that appears in every one of these column block areas. Between the french brackets above you would see this line - it's important:
min-height: 450px;
This says that each column extends downward 450px, which seemed to be about the right distance for those using a smaller monitor and resolution. Nonetheless, for many it might be too much and as a result a scroll bar should appear. It is time to move on and list the code for the next two blocks in quick order (no big differences), then move on to the more interesting aspects. Such as when it does not quite work as expected - now that gets very interesting quickly.
So lets see the next two div tab block areas central-col and right-col:
#central-col {
position: relative;
float: left;
width: 58%;
height: auto;
...
background-color: #cccccc;
...
min-height: 450px;
}
#right-col {
position: relative;
top: auto;
float: right;
width: 20%;
height: auto;
background-color: #cccccc;
...
min-height: 450px;
}
The important points are: 1.) the width adds up to 100%, so the browser is filled fully side to side whatever the size; 2.) this follows from (1.) the div blocks are touching; 3.) the central block floats left to touch the narrow more left positioned block; and 4.) this set of columns all have the same minimum height.
<div> Tag Related Discoveries
Now just humor me a bit and fill each with some content: in the left most column, center the text and have some links or titles; in the central, write a few paragraphs to get about a half page; in the right most column just put a centered title. OK, this is where it can get interesting. No problem? Looks fairly good, if crude. Well you must be using Firefox as I. However, the folks using IE see a different horrible picture. What's that reddish brown area to the right? The obvious answer it is the background color given to the Base class. Our fix is to apply the same background color to the Base as we use in the floating div areas. Test it and the brown is gone.
This brings up a disturbing questions. Why is Microsoft's browser so late in complying to standards they helped set? It seems that Internet Explorer both 6 and 7 are supposed to support the min-height attribute. So why is it failing despite already having set the height attribute to auto? [What I have read is the suggestion to the height is set to that same value, however, I distrust that approach. If the column holds content, I want it to grow to whatever size it requires. Hence, my reluctance to follow the supposed fix.] Really I am unsure of the cause. Nonetheless, the fix works. Later I may run across a better explanation and fix. That is my modus operandi, some may not like it. However, I have a limited tolerances of pounding my head against hard objects. I accept temporary fixes readily while always looking for something better.
I had some problems with this page where despite having the content in the left column centered too often the text in the central column seemed to be too close. I wanted to have a visual distance without resorting to a visible border. My first pass was to use a margins in centimeters [cm] on both the right and left sides of the Central block. At first view it looked fine until I noticed I had lost my Right column that was forced below the other two columns. I guessed correctly that I had to reduce the percentage I placed on the Central block. Reducing it to 55% had all three columns in their proper positions with a nice spacing between text in adjacent columns.
Depending upon one's energy level at a given time, the fix may not satisfy everyone. I let it go, because I knew I would return to it later. Reading up on margins I discovered they are external to the div block, hence, obviously they consume space on the sides. Padding, however, were spaces from the border inward into the div block. That should be the solution, right? Well I am now using padding over margins, but here too it proved necessary to decrease the area width allotted to the Central column. It works and for now suffices. I know too I will return to this issue to discover what I have missed that gave me again surprising results. I have learned that problems that elude me are surprisingly easy when I am confronted by my obvious error when doing something complete unrelated.
[I encountered a solution today to a problem I knew existed and even had a good guess at its cause, however, at the time I missed the blindingly obvious solution. I will describe both the problem and the solution in the planned the third item in this series. Read my take on div Borders and my quick fixes when it hits the site.]
There is one other issue I should warn you. On the monitor I am using to construct these pages the background color for the Base and the three columns that sit side by side appears to be an off color white with a greenish-blue tinge. However, using my other monitor the same areas are a very definite gray. Be aware that the results you see on one browser as I mentioned above can differ markedly from another. Colors rendering is a harder issue to control.
<div> Skeletal Web Page Structure
I am only including code falling within the <body> and </body> section. If you need to see more detail about the items in the top of an html page in my discussion of using Templates to speed hand coding. That treatment will be appearing soon. Here is the skeleton structure of the tags in the page described above:
<body>
<div class="Base">
<div id="header-square-edge">
...
</div>
<div id="Left-col">
...
</div>
<div id="Central-col">
...
</div>
<div id="Right-col">
...
</div>
</div> <!-- This is the end of the Base (foundation) class -->
</body>
Pretty clean and simple, I find this much better than tables though the latter can also create web pages with the same structures or even more complex. Until I saw how a code generator misused tables I was not against their supposed over use, now I just say the div tabs are my preference. I am not here to strong arm anyone into using what I personally prefer. Use what is easiest for your use and conforms to your own tastes.
Potential Color Error
During a recent change of the color pallet for this site, I now suspect the color anomaly I discussed above is due to the background color selection I made for the entire body of the web page. Therefore, to be safe also set the Body to the same initial setting for the garish reddish brown on both the (class) .Base and Body tag in your css file. Return to the discussion of the .Base section?
Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.
© Herschel Cohen, All Rights Reserved
Return B/ST Home or Tags Page
____________________________________________________________________
1. I have seen style placed at the top of html page code,
however, other than img tags I never used style attributes
to control the appearance of pages. Hence, its use may be
less dire than I have described it. Return