hey, im back again :P, anyways im getting better at CSS , ok my problem is, my navigation background doesnt show all the way down. i have no idea why, here is the link

http://www.lhost.info/hh121/

HTML: you can view it on the site

CSS:

/* THIS IS THE BODY AREA */
body
{
background-image:url('bodybg.jpg');
margin-top:0px;
margin-left:150px;
margin-right:100px;
}
/* THIS IS THE BODY AREA */

/* THIS IS THE P/TITLE/LINKS AREA */
p{
font-family:tahoma; font-size:10px; color:#3a3a3a;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
margin:0;}

#header .div1{
font-family:tahoma; font-size:14px; color:#ffffff;
padding-top:6px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;}
#footer .div2{
font-family:tahoma; font-size:14px; color:#ffffff;
padding-top:6px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;}

a:link{color:#999999; text-decoration: none;}
a:visited{color:#999999;}
a:hover{color:#999999; background-color:#ffffff; padding-left:3px; padding-right:3px;}
/* THIS IS THE P/TITLE/LINKS AREA */

/* THIS IS THE CONTAINER AREA */
#container
{
width:94.7%;
margin-top:0px;
background-color:#f9f8f3;
}
/* THIS IS THE CONTAINER AREA */

/* THIS IS THE HEADER AREA */
#header
{
height:30px;
background-color:#092a39;
}
/* THIS IS THE HEADER AREA */

/* THIS IS THE BANNER AREA */
#banner
{
height:179px;
background-image:url(banner.jpg);
}
/* THIS IS THE BANNER AREA */

/* THIS IS THE NAVIGATION AREA */
#nav
{
float:left;
width:20%;
border-top: 10px solid #4e3425;
background-color:#f9f8f3;
}
/* THIS IS THE NAVIGATION AREA */

/* THIS IS THE CONTENT AREA */
#content
{
float:right;
width:79.7%;
padding-left:1px;
border-top: 10px solid #123241;
background-color:#ffffff;
}
/* THIS IS THE CONTENT AREA */

/* THIS IS THE FOOTER AREA */
#footer
{
clear:both;
height:30px;
background-color:#092a39;
}
/* THIS IS THE FOOTER AREA */

messy i know, but i dont understand the bit when they do padding: 0 10px 0 10px;, i know its saying top-left-right-bottom, but when i do it, its weird, its not in the same order.

First of all, you have nothing IN the navigation area.
If you want the left column to always appear to be the same length as the rest, you might want to try the faux columns method:

http://www.communitymx.com/content/a...ge=1&cid=AFC58

nono hehe, i did it before lol. but i dont know why its not working. maybe i added a code im not suppose to. like the container background isnt the color of what i said, its the background of the body background. why? no idea :S WHERE IS VASH! HES SO PRO

Well, one thing I noticed is that you have not closed your header div. I assume you want the banner inside the header section and that's it. W/o the closing </div> on the header, ALL the rest of your page is INSIDE the header section.
I closed the header div and then the nav column turns a pale tan or whatever that color is.

Oh..FYI -- padding and margins like this: padding: 10px 5px 12px 2px = Top Right Bottom Left =- just think TRouBLe

ok, i fixed it, but when i close the div like <div id="header" class="div1">Header</div>, the header has no style. but when i change it to <div id="header"> <div class="div1">Header</div> the header gets its style but then the bg goes again..

<div id="header" class="div1">Header</div>

Because it must have either an ID or a class, it can't have BOTH.
<div id="header">
<div class="div1"></div>
</div>

Put all your style rules in the ID.

Your code needs to be like this:

<div id="container">
<div id="header"><div class="div1">Header</div>
<div id="banner"></div></div>
<div id="nav"><p>Navigation</p></div>

ah okay i fixed it needed two </div>'s

It's coming along pretty good. Right now you're missing a closing div tag for div#header in the html which should fix things in IE.

You actually can have both an id and a class on the same element, but it didn't look like you were specifying things right in the css for that case which is why I think it wasn't working.

When you have

#header .div1

what you're saying is to aplly the following styles to anything with a class of .div1 that's inside of an element with an id of header. When you had both the id and class on the same div one wasn't inside the other. They were both at the same level.

When you had them both on the same div you could have specifed them in the css as

#header, .div1

The comma is saying apply the following styles to both #header and .div1. That would work, but it's kind of redundant in this case since both were only on the same element.

Hope that all made sense.

yay, hey van . yeah i didnt add the second </div> on the header. anyways i fixed it now. its looking good .

It may be looking ok in IE, but in Firefox 1.5 the center column stretches the full width and the 2 nav divs are floating ON TOP of the center. It's not a good idea to develop using IE, it gets so many things wrong. Develop and test in FF, then fix what you must to make IE behave.

rofl, i do use FF, never use IE. its a lame browser, and many lame popups and it looks ugly. so ty

I agree 100%, IE stinks There are so many newbies that use IE and then make a web page and go crazy when FF looks all wonky.