CSS Beginner/proper way of using links and boxes

Not really.

Assuming all the information was in one page, you could use :hover or :focus pseudo styles to hide/reveal different information. CSS changes aren't permanent, once the :hover state ends or :focus changes the page will revert to its default settings. This is ok for things like menus but is unlikely to suitable for main content. To achieve what you want with main content you either require javascript, frames or multiple pages.

Multiple pages is the most common solution used by most websites. Use SSI or a scripting language to avoid having to duplicate large parts of your html on each page.

You'll need to post a link for that :?

The link is www.tishi.net/testcss.html

It's just a site I'm building to "doc" some of my Linux and C information so I don't have to carry so many of my books and papers.

Multiple Pages is what I want to use, but am trying to figure out a way not to have it break box1 and box2. Some format rules are in order I guess.

Hello,
Firstly lets validate your HTML and CSS.
HTML:
1-) You have had used TWO <div id="content"> into your HTML code! One before and other after the <div class="spacer">&nbsp;</div>. Get rid of the one after.
2-) Add the alt attribute for your header image:

<div id="headerblock">
<img src="Header.jpg"  height="220" width="700"
 border="0" alt="put a descripton for image here"></div>

CSS:
You set color:grey for a:link. Wrong spell ! The correct is gray
And be aware: validator results return "Warnings" isn't CSS errors.

I did as you asked. Funny how this site lookes okay in 1280X1024 in IE and even FF but Safari yuck.

Just wondering if there is anything else that is sloppy? Is there anything else that you can say needs a bit of work before I try to figure out how links in one box changes content in another?

Your layout is far too wide. Not everyone has a screen res set higher than 1024 x 780 and people hate having to scroll horizontally to view content.
Also, you don't need to do &nbsp; &nbsp; &nbsp; &nbsp; to indent your paragraphs. You can use text-indent instead.

Care to elaborate? What do you mean, even Firefox? Is there some reason FF WOULDN'T display it properly?

Tyssen pointed out:

That's true.
I suggest to make a liquid layout using percentages for widths in order to accomodate to screen resolution.
Make a backup copy of you document and use these new CSS rules:

#content {
font-size: 12px; 
line-height: 20px; 
font-family: Verdana, Geneva, Arial, sans-serif; 
background-color: #74C8f6; 
text-align: left;
margin-right: 1.5%;
margin-left: 1.5%; 
height: auto;   
	}

.col1 {
padding: 3px 3px 3px 3px;
font-size: 12px;
line-height: 10px;
text-align: right;
float: left;
width: 20.0%;
height: auto;
border-style:solid;
border-color:black;
background-color: #B4DAFF        
	}

.col2 {
padding: 3px 3px 3px 3px;
margin-left: 0.5%; 
margin-right: 0.5%; 
border-style:solid;
border-color:black;
float: left;
height: auto;
width: 54%; 
background-color: #B4DAFF
    	}

.col3 	{
padding: 3px 3px 3px 3px;
font-size: 10px;
float: left;
width: 20.0%; 
height: auto;
border-style:solid;
border-color:black;
background-color: #B4DAFF
	}

There is a sintax error in your CSS: (validate it again)
#header {
...........
hight:100%; /* correct is ==> height:100%; */
}

I prefer to use all browsers. Again I thank you for your knowledge and time. I will adjust the code as directed. I actually coded this with about 5 examples from the web, www.w3schools.com, using notepad and vi so you'll have to excuse my lack of experience. No WYSIWIG.

Just wondering is it good practice to use auto or an actual value?
Example below:

height: auto;
}

If you can - its very good to stick with height:auto. That way your design can grow with content and adjust to font-size changes.

Is height & width: auto the same as not specifying a value or are they used mainly when you want to override a specific value that has been inherited?

auto is the default. So yes, it is the same as not specifying a value, which also means you should only need to specify auto when you are trying to override another less specific style rule. width and height are not (never?) inherited, although the "total width" of a block element defaults to 100% of the width of the display context it resides within.

The auto CSS value is very useful in some "hacks".
Below an hack to simulate min-height for IE that uses height:auto.

selector {
    min-height: 200px;
    height: 200px;  /* for IE that does not understand min-height and treat height as min-height  */
    }
body > seletor {
    height: auto;  /* for compliant browsers in order to override the previous fixed height */
    }

Maujor, I understand that your code works - or it would do if you spelt selector the same way both times , however I don't think it good practice to write incorrect CSS and then use a specially targetted rule to correct it. Its better to write correct CSS and then use a targetted rule to fix a specific browser problem.

So...

some_selector { min-height: 200px;}
* html some_selector {height: 200px;}

Or better still, in IEs case, use IE conditional comments to load any extra/overriding styles in a separate style sheet.

Chris..S:

Am not the authors code. I've posted the code only for point out an example of auto CSS value.
If it's or not the best pratice is another issue.
Personally I hate any kind of hacks, but unfornate we can't live without they. The star hack for IE isn't better than a child selector, or is it? or maybe? or depends upon each situation? or this is an unansewerable question?.

The point is Maujor that you are writing in a problem and using another rule to correct that problem, it's a case of how you look at in a logical manner.

Hugo.