Web Site
Developers

Coding DIV Tags - II

Where We Left Off

To remind you, here is the way our original front/home page was subdivided into a header and three vertical columns of differing width all floating over a Base div that covered the entire dimension of our web page. Focus on the central column:

Finer Structuring: Vertically Arrayed Panels

Here is a diagram mocking up approximately the structure I am seeking to create on the central part of the front page is shown below. Note the appearance of the color bands having differing heights is purposeful. Each band's vertical height is determined by the amount of text it contains.

Central Column Code

If you need to be reminded of the bare bones html code, return to view it under: Skeletal Web Page Structure section. However, remember our focus and code pertaining to this topic all fits within:

  <div id="central-col">
     ...
  </div> <!-- End of Central column -->

All the html code that is of interest here goes into the area of the ellipses with respect to these new div tag areas. The inserted code, is simple albeit repetitive[1.]:

  <div id="central-col">

     <div class=""bands">

	    <p><b>June 31, 2099 - Open Source Wins! 
	        International Tournament ...</p>
     </div> <!-- End of this Band -->

     [etc., etc. until]

  </div> <!-- End of Central column -->

The real effect and our interest should be focused more on the cascading style sheet file (css). Within this file the behaviour is set. These bands possess the flexibility to change shape and the appearance of the text contents upon the user resizing the browser window. Other features are set there too: color, borders and the space taken between bands.

CSS File Code

So as not to be too coy, here are the css entries for both Central-col and Bands in nearly complete form, the central column first:

  #central-col {
      position: relative;
      float: left;
      width:   55%;
      background-color: #FDFFFF;
      color: #000000;
      border-left-style: solid;
      border-left-color: #b22222;
      border-left-width: 8px;
      border-right-style: solid;
      border-right-color: #b22222;
      border-right-width: 8px;
      min-height: 450px;
      height: auto;
      border-fit: auto;
  }

You should notice there are now two solid, red colored borders on the left and right sides. Also be reminded the minimum height, at least in Firefox, and that it grows with content. I cannot quite remember why I threw in the border-fit attribute; it may have been that it did not reach the bottom of the column. I remember something like that being an issues when I first began to experiment with the band placements.

Next here is the css entry for the div bands class:

  .bands  {
      position: relative;
      text-align: justify;
      font-size: 18px; 
      width: 99%;
      height: auto;
      min-height: 50px;
      background-color:  #ADD8E6;
      color:  #000000;
      padding-left: .5%;
      padding-right: .5%;
      border-top-style: solid;
      border-top-color: #000000;
      border-top-width: 3px;
      border-bottom-style: solid;
      border-bottom-color: #000000;
      border-bottom-width: 3px;
      margin-bottom: 20px;
  }

The presence of the top and bottom borders are obvious, however, more significant is the bottom margin that determines spacing between bands. One other feature that has been mentioned is the auto-sizing of the height, which is determined by the font size, band width (browser sizing) and the text being justified. Note too my use of percentages on both the border size and the width of the bands. I have found percentages a more reliable attribute value than other more fixed size values as the pixels. If you use fixed dimensions of your page, the latter should not be of importance to you.

Band Detail

Here is a detailed view of the left side of a band that is the current full size image. It may seem enlarged when you see it, if I later change the font size within the bands:

You can see the the band is flush to the left border, the percentages make sure the band to the right is is a tight fit to the right border. To see this clearly use the link below to return to the home page.

Final Thoughts

We have increased the complexity of the div tag grouping, nonetheless, the html is relatively clean and the css code has assured the behaviour I sought. More has been altered on the home page than just adding a set of vertically floating band in the central portion of the page, however, those changes are independent div tags. These custom header use their own margin settings to keep them clear of the band groupings. Therefore, they are not part of this discussion.

I have plans to visit another set of div complexity, where I hope to create div classes that I can use in more than a single location on a given page and on more than one page. My experimentation is not yet complete, hence, I can say little more at this stage. I can, however, predict the code will require additional tools beyond html and the css file(s). With a bit of luck I will have a few more interesting techniques to show you. [Unsure now what I had in mind then, however, the series stayed on the static page course through the fourth in this series. Nonetheless, when I catch up, I will show a fix for column heights that can involve real code.]

Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.

Return Home or Tags Page

____________________________________________________________________

  1. While the div tag code will be repeatedly be inserted, the text
     within each band will be a different in every instance making
     this a more complex matter.  This is where the level of hand 
     coding has reached its limits.  It requires too many repetitive 
     tasks upon every modification.  Stay tuned, this has to change.

     Return to text at [1.]

Web Site Developers