CSS - Basic Float Question (was "basic <div> Question")

I am new to this stuff started php about a month ago

now i started with this css nav menu last week and can not figure out how to get the thing in the center of the page
also
in FF the nav menu is fine just not in the right location
in IE the bottom half of the nav menu sticks out one inch past the top half

here is my css

PHP Code:
#divNav {
    background: transparent url(../images/bk-nav.jpg) no-repeat top left;
    margin: 0;
    padding: 0;
    height: 80px;
    width: 800px;
}

#nav {
    position: relative;
    top: 55px;
    height: 80px;
    width: 800px;
}

#nav li ul, #nav li ul {
    margin: 0;
    padding: 0;
}

#nav a {
    text-decoration: none;
}

#nav li { /*float the main list items*/
    margin: 0;
    float: left;
    display: block;
    padding-right: 15px;
}

#nav li ul {
    display: none;
}

#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
    position: absolute;
    top: 25px;
    left: 0;
    padding-top: 15px;
    background: #224d6f;
    height: 28px;
    width: 740px;
    padding-left: 60px;
}

#nav li.on ul {
    background: #f90;
}

#nav li.on:hover ul, #nav li.over ul { /*for ie*/
    background: #224d6f;
}

#nav li a {
    color: #224d6f;
    font-weight: bold;
    display: block;
    width: 93px;
    padding: 0;
}

#nav li.on a {
    color: #f90;
}

#nav li.on ul a, #nav li.off ul a {
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
    background: #224d6f;
}

#nav li.on ul {
    display: block;
}

#nav li.off:hover ul, #nav li.over ul {
    display: block;
    z-index: 6000;
}

#nav li.off a:hover, #nav li.on a:hover { 
    color: #f90;
}

/*do the image replacement*/

#nav li span {
    position: absolute;
    left: -9384px;
}

#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
    display: block;
    position: relative;
    height: 26px;
    background: url(../images/bk-dropdownMap.gif) no-repeat; /*contains all hover states*/
}

/*first, put the initial states in place*/

#liRenaissance a {
background-position: 0 0;
}

#liArtNouveau a {
background-position: -102px 0;
}

#liModern a {
background-position: -204px 0;
}

#liPostModern a {
background-position: -306px 0;
}

#liDigital a {
background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

#liModern.on a {
background-position: -204px -37px;
} /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
display: block;
background: #224d6f;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}        

#nav li.on ul a {
background: #f90;
} 

I have a CSS call for all p, like this

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
}

now I want headings to be ital, so I add

p.ital {
font-style: italic;
}

and set the class for some p to ital, and they inherit font family and font size. Now I want further inherit, italBold

p.italBold {
font-weight: bold;
}

That is, I want p.italBold to inherit from p.ital, which inherits from p. How can I do this?

Thanks for your help

CJB

Argh - I am not very good with CSS (uhm, obviously) and all I am trying to do is change the color of some list items in a blog menu. It's Wordpress, and, it's not as if the blog is important - but this is driving me insane. I've installed Firebug in an effort to figure out what is making these items red - or #333. I can alter the code in Firebug and it gives a visual representation of what the edit would look like. But when I actually make the edit, nothing happens. And I've deleted my browsing history, used every browser, etc. - and I can change everything else! I am trying to change the text color in the right hand menu from red to, well, something else.

The pages is at: http://www.webputzer.com

The .css file looks like this:

Code:

/*
Theme Name: alibi
Theme URI: http://www.blogchemistry.com/
Description: 2 column, with RHS widget sidebar
Version: 1.2
Author: BlogChemistry
Author URI: http://www.blogchemistry.com/
*/



body {
margin: 0;
padding: 0;  
color: #333;
text-align:center;
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size: 100.1%;
background: #fff;
}


#wrapper2{
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

#wrapper3{
border-left: 1px solid #666;
border-right: 1px solid #666;
}

#wrapper4{

}


#wrapper{
width: 770px;
margin: 0px auto;
padding: 0px;
text-align:left;
font-size: 85%;
line-height:20px;
background: #fff;
border-left: 3px solid #333;
border-right: 3px solid #333;
}


#header{
padding: 1px 0px;
margin: 0;
background: #ccc;
}	


#header-inner{
margin:0;
padding:0;
}


		
#content{
clear:both;
margin: 0;
padding: 5px 5px 5px 10px;
background:#fff;
}	

#content-inner{

}

#main {
width: 550px; 
float:left;
margin: 0;
padding: 5px 0 10px 0;
overflow:hidden;
}


#sidebar {
padding: 0;
margin: 0 0 0 560px;
background: #fff;
}


#footer {
clear: both;
margin: 0;
padding: 10px 16px;
text-align: center;
font-size: 85%;

}


#footer-inner{
background: #f2f2f2;
height: 50px;
}

#footer p{
margin:0;
padding:15px 0;
}

#navigation{
padding: 5px 15px;

}

#navigation div.fleft{
float:left;
}

#navigation div.fright{ 
float:right;
}

#credit{
text-align:right;
padding: 0 15px;
}

#credit p{
margin:0;
color:#777;
font-size:85%;
}

#credit p a, #credit p a:hover{
color:#999;
font-weight:100;
}

/*  ********** default styles *********** */

p, h1, h2, h3, h4, h5, h6{
margin: 10px 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: georgia, 'Times New Roman', sans-serif;
}

h1{
	font-size: 190%;
}
h2{
	font-size: 160%;
}
h3{
	font-size: 120%;
}
h4{
	font-size: 130%;
}
h5{
	font-size: 100%;
}
h6{
	font-size: 70%;
}


a{
color:red;
font-weight:800;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}

a img{
border:0px;
}

hr{
height:2px;
margin:5px 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}

blockquote{
background: #f4f4f4;
padding: 5px 15px;
margin: 3px 30px;
}

form{
margin: 0;
padding:0;
}

fieldset{
padding:10px;
margin:0;
border:none;
}

legend{
font-weight:800;
}

code{
	font-size: 90%;
	font-family: "Courier New", Courier, monospace;
	white-space: pre;
}

td{
 vertical-align:top;
}



#tabs {
  float:left;
  width:100%;
  font-size:90%;
	background:#000;
  line-height:18px;
	
	border-top: 1px solid white;
}


    #tabs ul {
	  margin:0;
	  padding:4px 10px 0 10px;
	  list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs a {
      float:left;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs a span {
      float:left;
      display:block;
      padding:5px 15px 3px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs a span {float:none;}
    /* End IE5-Mac hack */
    #tabs a:hover span {
      color:#FFF;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }  
	
	


/* Headings */ 

form#searchform2{
display: block;
float:right;
margin: 55px 10px 0px 5px;
}

#header h3{
margin:  0;
padding: 30px 0 0 10px;
}

#header h3 a{
font-weight:100;
color: #fff;
text-decoration: none;
font-size: 220%;
letter-spacing: 1px;
}

#header h2{
margin: 0;
padding: 10px 0 5px 10px;
font-weight:100;
font-style:italic;
color: #fff;
font-size: 130%;
letter-spacing: 1px;
}

h2#sectiontitle{
font-size:100%;
font-weight: 800;
font-family: arial, verdana, sans-serif;
padding:6px 6px 6px 10px;
margin:8px 10px 5px 10px;
background: #f2f2f2;
color: #444;

}

/* post styles */

.post{
margin: 0 0 10px 0;
padding: 0 5px 5px 5px;
}

.entry{
margin: 0;
padding: 0px 10px 3px 10px;
}

.post h2 {
color: #333;
font-size: 150%;
font-weight:100;
padding: 7px 0 2px 2px;
margin: 10px 0 15px 0;
}


.post h2 a{
color: #333;
text-decoration:none;
font-weight:100;
}

.post h2 a:hover{
text-decoration:none;
color: #333;
}

.postmetadata{
font-size:80%;
padding: 1px 8px 1px 5px;
margin: 0;
border-top: 1px solid #ccc;
}

.postmetadata p{
line-height: 18px;
padding: 0;
margin: 2px 0;
}


.date{
float:left;
text-align:center;
font-weight:800;
margin: 0 10px 0 0;
padding: 0 10px;
border-right: 1px solid #ccc;
color: #444;
}


.dateDay{
display:block;
font-size: 16px;
line-height: 16px;
text-align:center;
}
.dateMonth, .dateYear{
display:block;
font-size: 11px;
padding:0;
line-height: 12px;
}




/*  Comments   */

h3#comments, h3#postcomment{
	font-size: 100%;
	font-family:verdana, sans-serif;
}	

ol#commentlist{
padding: 0 0 0 20px;
font-size: 90%;
list-style-type: none;
}

ol#commentlist li{
	padding: 0px 3px;
	margin: 0;
}

ol#commentlist li p.commentheader{
margin: 0px 0 0px 0;
display: block;
padding: 1px 5px;
}



ul#commentlist{
padding: 0;
margin:0;
list-style-type:none;
}

ul#commentlist li{
	display: block;
	padding: 0;
	margin: 0 15px 5px 15px;
	font-size:90%;
	background: #f2f2f2;
}

ul#commentlist p{
margin: 6px 0;
}

ul#commentlist li div.comm{
margin: 1px;
padding: 1px;
}

ul#commentlist li div.gravatar {
	width:50px;
	float:left;
	padding: 10px 0 0 10px;
}

ul#commentlist li div.gravatar img{
border: 2px solid #ccc;
}




ul#commentlist li div.commenttext{
padding: 0;
margin:5px 10px 5px 65px;
}

ul#commentlist li div.commenttext div.commentwrapper{
margin:0 0 0 5px;
padding: 3px 8px;
}


/*  sidebar styles */


#subscribe p{
font-size: 85%;
margin: 3px 0 10px 0;
}



.menu{
padding:0;
font-size:90%;
}

.menu a{
font-weight: 100;
}

.menu a:hover{
text-decoration:none;
}

.menu ul{
margin:0;
padding:0;
list-style-type:none;
}

.menu ul li.widget{
padding:2px;
margin:0 0 0px 0px;
}

.menu ul li.widget ul{
	margin: 0;
	padding:0;
}

.menu ul li.widget ul li{
border-bottom:1px dotted #ccc;
background: #f2f2f2;
padding: 2px 0 2px 15px;
margin:0;
}

.menu ul li.widget ul li ul{
}

.menu ul li.widget ul li ul li{
border-top: 1px dotted #ccc;
border-bottom: none !important;
padding: 2px 0 2px 15px;
}



.menu ul li.widget h3{
font-family: arial;
font-size:120%;
padding:2px 0 1px 4px;
margin:0;
border-top: 3px solid red;
border-bottom: 1px solid #bbb;
color: #333;
font-weight: 800;
font-variant:small-caps;
}

.menu ul li h3 a{
color: #333;
font-weight: 800;
}
.menu ul li h3 a:hover{
color: #333;
text-decoration: none;
}

.menu form{
display:block;
margin:0px;
padding:4px;
}

.menu input{
margin:3px 0;
font-size:90%;
}

li.widget .textwidget, li.widget #search {
padding: 2px 5px;
}

/* Calendar styles */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}

#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}

#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}

#wp-calendar a {
display: block;
}

#wp-calendar caption {
text-align: center;
width: 100%;
}

#wp-calendar td {
padding: 3px 0;
text-align: center;
}


#footer a{
font-weight: 100;
}

If anyone could tell me what the heck is making this uneditable - man...I'd sure like to know...

I am trying to create a page to be printed out as a letter but I cannot for the life of me make the footers stick to the bottom when printed.

Here is the code:

Code:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<style type="text/css">
body {
	font-family:arial;
	font-size:10pt;
}
h1 {
	text-align:center;
	margin:0;
	padding:0;
}
div.letter {
	page-break-after:always;
}
.from {
	text-align:center;
}
.to {
	font-style:normal;
	margin-top:30px;
}
.date {

}
.footer {
	position:absolute;
	bottom:0;
}
		</style>
		<!-- compliance patch for microsoft browsers -->
		<!--[if lt IE 7]>
		<script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
		<![endif]-->
	</head>
	<body>
		<div class="letter">
			<h1>Stanley Road Baptist Church</h1>
			<address class="from">
				Stanley Road, Morecambe, Lancashire, LA3 1UP
			</address>
			<address class="to">
				Joe Bloggs
			</address>
			<p class="date">
				Friday 27th August 2004
			</p>
			<p>
				Dear Joe,<br />
				Blah blah blah.
			</p>
			<p>
				Yours sincerely,
			</p>
			<p>
				Matt Fletcher
			</p>
			<div class="footer">
				The Footer In Question
			</div>
		</div>
		<div class="letter">
                 ...
		</div>
		<div class="letter">
                 ...
		</div>
	</body>
</html>

I can get it to stick to the bottom of only the first page, but it doesn't appear on any others.

how do you set the width with CSS?

i'd like to have a table with two columns, 70% and 30% with text-align left on the 70%, and text-align right on the 30%. any ideas? thanks.