Novice CSS Question

Just by peeking into your markup with IE Dev Toolbar, first suggestion I could give is to give yourself a wrapper-div to hold all of your elements.

<div id="myContainer">
   
    <div class="header">...</div>
    <div class="menu">...</div>
    ...

</div>

You can then apply rules to the outer-most container, "myContainer".

#myContainer {
    width:800px;
    margin:auto;
}

For example. This would keep your site a fixed width, and center it up in the browser. The reason I mention the width is because in FF it looked similar to IE, until I expanded the width of my FF browser...then everything fell apart.

Another thing I would suggest is getting rid of your "leftSpacer" and "rightSpacer" divs. Instead of using that method, use left-margin and right-margin on your leftCont and rightCont.

Might consider this markup, or something similar:

<div id="container">
   <div id="header">
      <div id="mainNav">...</div>
   </div>
   <div id="content">
      <div id="leftCont">...</div>
      <div id="centCont">...</div>
      <div id="rightCont">...</div>
   </div>
   <div id="footer">...</div>
</div>

Just a couple suggestions. I'll take another look and see if anything else immediately strikes me.

Of relevancy, check out www.SampsonVideos.com if you're just getting started with CSS etc

anon wrote:

Ok, thats alot. Made a lot of sense. I'll make them changes now. And I will have to view your videos!

Sounds good man. Be sure to let us know how the changes turn out. We're all here to help

Soviut wrote:

I recommend creating a "reset" style that sets every tag to zero margins and zero padding.  This way, you can selectivly add margins and padding as needed, rather than battling with the different margins that each browser sets by default.

Try the following style.  Put it at the top of your stylesheet.  If any other tags start misbehaving and adding margins, just add it to the list.

html,body,h1,h2,h3,h4,h5,h6,p,a,ul,ol,li,table,tr,td,img,form,input,textarea,pre,blockquote
{
	margin: 0px;
	padding: 0px;
}

Might be easier to use say

* {
   margin:0;
   padding:0;
}

And then explicitly declare margins and paddings on things later on if needed?