800x600 screen reg problem

[kproc]

Below is css code which lays out my web page. I having a hard time with the right hand column when it comes to displaying that page at 800X600 px screen resultion. the info in the column shoots to the bottom of the column. It does not seem to fit the column width

any help is excellent

/* CSS Document */


/*** Page Setup ***/

/** Global **/

* {
	margin:0;
	padding:0;
	color:#12527A;
	text-align: left;
}


h2 {
	font:bold 24px/1.4 "Lucida Bright", Georgia, Times, serif;
	color:#12527A;
}
h3 {
	font:bold 18px/1.6 "Lucida Bright", Georgia, Times, serif;
	color:#12527A;
}

h4 {
	font:bold 16px/1.8 "Lucida Bright", Georgia, Times, serif;
	color:#12527A;
}

h5 {
	font:bold 14px/2.0 "Lucida Bright", Georgia, Times, serif;
	color:#12527A;
}

ul li {
list-style:none;
}

/* links */
a {
	color:#4C53E0;
}
a:focus, a:hover, a:active {
	color:#EB8518;
}
/** end global **/

body {
    font-size:14px;
	background: #F1F7FA;
	 
	}

#outer {
	clear:both;
	margin: 0 auto 1em auto;
	padding: 0 1em 1em 1em;
	width:800px;
	border:1px solid #AFAFAF;
	border-width: thin 1px;
	background: #fff;
	left: -3px;
	top: 29px;
   
}
 
ul#nav:after, #outer:after, #sub:after, form:after, form div:after, #head:after {
    content:".";
    display:block;
    visibility:hidden;
    clear:both;
    height:0;
    }

 html #nav, * html #content, * html form, * html form div, * html #head{
	height:1%;
}

/** hiding of elements for assistive devices (screen readers etc) **/
ul#access, .off {
	position:absolute;
	left:-1000em;
	top:-1000em;
}

 
/* <hr />'s added to mark-up for browsers without CSS */
hr {display:none}


/** Content Containers **/
#sub, #right {
    
   	font: 14px/1.5 'Lucida Grande', arial, verdana, sans-serif;
	word-spacing:.1em;
	margin-bottom:1em;
	
	 
}

#sub {
	 
	width:74%;
	float:left;
	
}

/***
Containers 
***/
#center {
	 
	width:65%;
	float:right;

}
#left {
     
	width:33%;
	float:left;
	min-height:600px;

}
#right {
    width:25%;
	float:right;
	
}
 
 /** Main Col Contents **/
#center p {
	margin:.5em 2% .5em 0;
}


/** Footer **/
#footer {
	clear:both;
	margin-top:1em;
	font:12px/1.4 'Lucida Grande', Arial, tahoma, verdana, sans-serif;
	border-top:3px double #AFAFAF;
}
#footer p {
	margin:1em 1em 1em 0;
	float:right;
	width:30%;
	text-align:right;
}
#footer ul {
	list-style:none;
	margin-top:.7em;
}
#footer li {
	display:inline;
	border-right: 1px solid #C8DCC2;
	padding:.3em 2%;
	
}

/***MenuBar***/

#nav li a
{
background: url(../images/css-nav.gif)  repeat;
height: 25px;
width: 80%;
display: block;
border: 1px solid #AFAFAF;
color: #0d2474;
text-decoration: none;
text-align:center;
}
	
	#nav, #nav ul { /* all lists */
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 8px;
	}
	
	
#nav li a:hover {

background: #F1F7FA;
height: 25px;
width: 80%;
display: block;
border: 1px solid #AFAFAF;
color: #12527A;
text-decoration:underline;

}
#nav span {
	background: #12527A;
	border: 1px solid #AFAFAF;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	height: 25px;
	width: 80%;
	display: block;
	}
	
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 1.25em;
		margin-bottom : -1px;
		width: 195px;
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 11.4em;
		margin-top : -1.35em;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
		left: -999em;
	}
	
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	#content {
		margin-left : 12em;
	}
#banner {
	background: #f1f7fa /*url("../images/proctors.jpg") no-repeat right top*/;
	border-bottom: 10px solid #f1f7fa;
	margin-bottom:10px;
	}

.indexbullet {
	background: url("../images/liBullet.jpg") no-repeat;
	padding-left:25px;
	padding-right:1em;
	margin-top:10px;
	list-style:none;
}


.messages {color: #E1E0D8}

/**********Table format*************************/
.tableheader {
	font-size: 14px;
	background-color: #F1F7FA;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	border:1px solid #AFAFAF;
}

table.columntable {
	margin-top:10px;
	font: 10px/24px Verdana, Arial, Helvetica, sans-serif;
	border-collapse:collapse;
	width:90%;
	
	}
td.rowLeft {
	
	border-bottom: 1px solid #AFAFAF;
	border-left: 1px solid #AFAFAF;
	padding: 0 0.5em;
	color:#12527A;
	}
	
td.rowRight {
	border-left: 1px solid #AFAFAF;
	text-align:left;
	border-bottom: 1px solid #AFAFAF;
	border-right: 1px solid #AFAFAF;
	padding: 0 0.5em;
	color:#12527A;
		}
		
td.border {
	border: 1px solid #AFAFAF;
	text-align:left;
	padding: 0 0.5em;
	color:#12527A;
		}
		
		
/***** Message Center ***/


#formmessage {  

	border:1px solid #C8DCC2; /** light Green**/
	color: red;
	width:200px;
}

.noticeBlue {
	border:1px solid #AFAFAF; /*** blue **/
	font: 14px Arial, Helvetica, sans-serif;
	color:#12527A;
	background: #F1F7FA;
	width:95%;
	
}

p.logout {
	border:1px solid #AFAFAF; /*** blue **/
}

[WebJoel]

....any help is excellent

We'd need to see more than just your CSS. I could check the CSS for syntaxual errors but that would be pointless unless we also see the HTML code that it affects. Coluld you post the ENTIRE code, or at link to the site (if online)?

[KDLA]

Joel's right. But, one thing I do notice from your CSS is that your columns add up to more than 100%:

/***
Containers 
***/
#center {
	 
	width:65%;
	float:right;

}
#left {
     
	width:33%;
	float:left;
	min-height:600px;

}
#right {
    width:25%;
	float:right;
	
}
 
}

65 + 33 + 25 = 123

Also, for IE, it's best not to have percentages add up to 100 because of all the padding and weird spacing IE adds to elements. I usually go for 98 or 99%.

KDLA

[kproc]

thank you for the help

website

familyclick.ca