---

Date Written: 4/19/07 Last Updated: 9/12/09

The main page of this site, out of necessity, uses the most advanced coding tricks that I know how to use.  This article was added so that I can begin to keep track of all of the latest tricks that I use to make the main page do what it does.  These are tricks that are unique to the main page or originated from work developed for the main page.

Some of the main categories that I will try to cover involve the following:

• The banner, which was actually rather complicated.  
  
• The page itself was done almost exclusively in CSS with no Tables at all.  
  
• The content and the blog display the latest four posts with no need to keep track of placement.  
  
• The layout is fluid in nature which was very hard to get to work and work in all browsers.
  
• The lines on the front page are not like the lines on other pages.
  
• The corners on a web page are not as easy to make as you might think.
  
• The dynamic nature of the main content in the what's new page and why I call it dynamic.

I think that is all.  I can tell that this will have to be a series of articles.

---

Newest Files

• img box
  
• summary box
  
• date spacer
  
• date box

img box The image has a 15px margin on the top, left, and bottom.  It floats to the left.  If there is no image submitted then a non breaking space ( ) will be used to make sure that the image box still occupies a space that is 23% of the width of the div for the Newest files.

summary box The title and summary are both one unit.  I have a minimum top, right, and left spacers for the title/summary as well.  The text is indented to the left by limiting the size of the summary box to 65% of the width of the parent div.  The summary box floats to the left against the image box.  The height is set to auto and a min–height is set to allow for an expandable summary that has a min height.

Date box Both the "date box" and the "date spacer" are contained within a div container that floats underneath the image and summary box and is the width of the Newest files div which is highlighted in blue.  If the date box and the date spacer divs were not placed within a separate div container then the date spacer would float underneath the img making it effectively invisible and absent, which would occasionally shift the "date reviewed" over to the left where I do not want it.

The "date reviewed" is automatically generated when I hit the "submit" button for an entry to be added to the main page.  It appears to be aligned to the bottom of the summary box, but is actually in a div that is one line in height with a line of padding on the top so as to maintain the line of separation from the summary if the summary were to exceed the minimum height of 180px for the summary box.  The "date box" has no minimum space to the right or left, but it has a bottom margin of space that is 10px and a top padding of space that is 16px, which is also the height of a line of text.  This is to ensure that if the text in the summary box exceeds the minimum height of 180px that there will still be a padding of space above and below the "date box" to keep it from combining with the summary text.

date spacer This is located to the left of the date box just below the image and is the same length as the image and is used to keep the text of the "date box" aligned to the text of the "summary box."  

---

An absolutely positioned div can be placed anywhere inside a relatively placed container.  The source article is here.

TAGS: website