CSS - Aligning Div Conents

i seem to be having trouble aligning two css layers

i have a border and then content within in (content is images) i would like to align another layer in here to the middle left. can this be done?

also the HTML is wrapping around the image, any way i can stop this?
as the images should be along the bottom below the image.

the link and data are as follows:
http://wakefieldfhs.co.uk/stu/users/njacques/9

and one last thing i just noticed while testing all this, its not displaying the footer and ending data
(this only occurs on my server, not on my test server. :S
Code:

(
                                layout->doExifBorder();
				echo("EXIF INO HERE");

				$layout->endBorder();
				$layout->endBorder();

		

		 footer();  // for future refernce footer.inc include the end div's!!
		 ?>)

(this would equate to: )
Code:

<div class='t-exif'><div class='b-exif'><div class='l-exif'><div class='r-exif'><div class='bl-exif'><div class='br-exif'><div class='tl-exif'><div class='tr-exif'>EXIF INO HERE</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div>

<div class="footer" align="center">

 <a href='about.php'>about</a> | disclaimer | privacy | terms of use<br></div>
</div>
</body>
</body>
</html>

Hi guys,

I'm having some serious problems in IE with my site I'm working on here http://www.q-net.net.au/~benvangrootel/fvd/index.html

the main problem is the amount of space in between the head banner and the content underneath and also the links under the images on the right - they aren't aligned properly compared to how they look in mozilla. I have no idea how to fix this, is there any quick fix?

css is here

Code:

	/* Layout Crap */
	body {
		text-align:center;
		background-image: url(bg.jpg);
		background-repeat: repeat-x;
		
		}
	
	#frame {
		width:697px;
		margin-right:auto;
		margin-left:auto;
		margin-top:10px;
		padding:0px;
		text-align:left;
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
		
	#contentleft {
		width:175px;
		padding:0px;
		float:left;
		background:#fff;

		}
	
	#contentcenter {
		width:550px;
		padding:0px;
		float:left;
		
		background-image: url(left_bg.gif);
		background-repeat: repeat-y;
		}
	
	#contentright {
		width:147px;
		padding:0px;
		float:left;

		background-image: url(right_bg.gif);
		background-repeat: repeat-y;
		}
	#contentright_container {
		margin-left: 19px;
		margin-top: 70px;
	}	
	
	#contentright_container_nodule {
		font-family: arial;
		margin-bottom: 10px;
		margin-left: 3px;
		
	}	

	#contentright_container_nodule li{
		list-style-type: square;
		color: #EDAE00;
		line-height: 12px;
		margin-left: 14px;

		}
	
		
	#contentright_container_nodule a{
		color: #2A2A2A;
		font-size: 8pt;
		padding-right: 30px;
		
		}
	#contentright_container_nodule a:hover{
		color: #EDAE00;
		font-size: 8pt;
	
		}
			
	#contentheader {
		width: 697px;
		height: 74px;
		background-image: url(head_bg.gif);
		background-repeat: no-repeat;
		}

	#contentheader img {
		top: 10px;
		left: 74px;
		position: relative;
		}
	#contentcontainercontainerlol {
		top: 100px;
		left: 12px;
		position: relative;
	
		}
	
	#contentcontainer {
		background-image: url(content_container_bg.jpg);
		background-repeat: no-repeat;
	
		}	
	#contentcontainer h1 {
		color: #EDAE00;
		font-family: arial;
		font-size: 17px;
		padding-top: 17px;
		margin-left: 15px;
		margin-bottom: -8px;

		}
	#contentcontainer p {
		color: #afafaf;
		font-family: arial;
		font-size: 13px;
		padding-left: 20px;
		padding-right: 26px;
		line-height: 20px;
		
		}
		

	#footer {
		position: relative;
		margin: 0;
		padding: 0;
		clear: both;
		background: url(footer.gif)  no-repeat top left;
		background-repeat: no-repeat;
		width: 697px;
		height: 35px;
  		text-align:center;
		font-size: 7pt;
		font-family: arial;
		color: #CFCFCF;
		}
	#footer a {
		color: #CFCFCF;
	}


		
/* Menu Crap */
#navContainer {
top: 37px;
right: 60px;
position: relative;
}


#nav {
 width: 409px;
 height: 20px;
 background: url(image.jpg);
 margin: 10px auto; padding: 0;
 position: relative;
}
#nav li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;}

#nav li, #nav a {height: 20px; display: block;}

#home {left: 0; width: 44px;}
#profile {left: 45px; width: 61px;}
#operations {left: 105px; width: 87px;}
#services {left: 192px; width: 68px;}
#customers {left: 260px; width: 85px;}
#contact {left: 345px; width: 72px;}

#home a:hover {background: transparent url(image.jpg) 0 -20px no-repeat;}
#profile a:hover {background: transparent url(image.jpg) -44px -20px no-repeat;}
#operations a:hover {background: transparent url(image.jpg) -105px -20px no-repeat;}
#services a:hover {background: transparent url(image.jpg) -192px -20px no-repeat;}
#customers a:hover {background: transparent url(image.jpg) -260px -20px no-repeat;}
#contact a:hover {background: transparent url(image.jpg) -345px -20px no-repeat;}

thanks in advance

Ok just so you know what I am trying to do here is a link to the problem page. -Problem aligning images-

Well ok what I want is for the position of the images to be displayed in absolute positions to the page and not to the image before it. Since I am really new to CSS I can't seem to find a good way to do this (without using tables UGH!). I have read about using float and div tags but not sure how to go about it. Here is a link to my other page of pics that display as I want them only because the pics are all the same size.

-Images displayed correctly-

This is the only code I have so far for displaying the images. The first img style aligns the image to the left and the 2nd to center and the 3rd to the right.

Code:

/* Set the style for image(s) displayed */
img.left
{
	margin-left: 10em;
}

img.center
{
	margin-left: 3em;

img.right
{
	margin-left: 3em;
}

Hope that makes sense,
Gerbill

Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up.

Thanks

I have a full css site that im in the mits of creating. It has 3 colums across in the main part of the site as you will see in the link below that some of my divs dont seem to be lining up w/ the top of the page...

http://www.pollutionpaintball.com/version3/dennis_wells.html

I have the first column that contains the thumbnails floating right with a margin-left of the navgition width and the profile div width.

Next I have the navigation floated left

Then I have the profile section in a div w/ a left - margin the size of the navigations width...

any pointers would help...

Hi all,
I am having trouble getting my third column to sit in place correctly. Here is the code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0051)http://www.jonra.com/css-demos/css-layout-demo.html -->
<HTML><HEAD><TITLE>CSS layout using divs</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="" name=Keywords>
<META content="" name=Description>
<STYLE type="text/css" media="all">
  @import url( css/commonSite.css );		
</STYLE>

<META content="MSHTML 6.00.2900.2668" name=GENERATOR></HEAD>
<BODY>

<DIV class="panelS">
<DIV class="colOne"><IMG src="images/nav_sites.gif" align="right" alt="">
<DIV class="colTwo">
<DIV class="linkS">
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A> | 
<A href="http://homepages.com/" target="_parent">homepages.com</A>
</DIV>
<DIV class="colThree"></DIV>
</DIV>
</DIV>
</DIV>
</BODY></HTML>

Code:

.panelS
{
    BACKGROUND-COLOR: #adadad;
	WIDTH: 760px;
	position: absolute; 	
}
.colOne { 
	FONT-WEIGHT: bold; 
	FONT-SIZE: medium; 
	LEFT: 0px; 
	WIDTH: 85px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative; 
}
.colTwo {
	FONT-SIZE: medium; 
	LEFT: 85px; 
	WIDTH: 475px;   
	HEIGHT: 21px;
	background-color:#FF6633;
	position:relative;		
}
.colThree { 
	FONT-SIZE: medium; 
	LEFT: 560px;  
	WIDTH: 200px; 
	COLOR: #ffffff;   
	HEIGHT: 21px;
	position:relative;
	background-color:#00CCCC;	 
}
.linkS
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:link
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:visited
{
    FONT: bold 10px Verdana;
    COLOR: #fff;
    TEXT-ALIGN: right;
    TEXT-DECORATION: none
}
.linkS A:hover
{
    FONT: bold 10px Verdana;    
	COLOR: #0055c3;
	TEXT-ALIGN: right;
    TEXT-DECORATION: underline
}

I was wanting all the columns side by side.
Any ideas where i might be going wrong?

Cheers

I have a website test2(dot)gigajobs(dot)com(dot)au


And have a section where user can Jobseekers can login But I can't seem to format the Username and password , register as a jobs seeker and forgot password labels so it is aligned to margin-left:12px;

I've tried everything I can think of and am tearinhg my hair out.

css

td.publish-label{width:200px; }
td.publish-label a { color: ##2E8EE8; text-decoration: underline; }
td.publish-label a:hover { color: #68AAE7; text-decoration: underline; }

html

<h2 class="widgettitle">{$translations.applicant_admin.login}</h2>
<table border="0" cellspacing="2" cellpadding="2">


<tr>
<td class="publish-label">
<a href="{$BASE_URL}applicant/register/">{$translations.applicant_admin.register_account}</a>
</td>
<br>
</tr>


<tr>
<td class="publish-label">{$translations.applicant_admin.email_address}:<br />
<input {if $errors.username}class="error" {/if} tabindex="1" type="text" name="username" id="username" size="32" value="{$smarty.post.username}" />
<span class="validation-error">{if $errors.username}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span>
</td>
</tr>
<tr>
<td class="publish-label">{$translations.applicant_admin.password}:<br />
<input {if $errors.password}class="error" {/if} tabindex="2" type="password" name="password" id="password" size="32" value="" />
<span class="validation-error">{if $errors.password}<img src="{$BASE_URL}img/icon-delete.png" alt="" />{/if}</span>
</td>
</tr>
<tr>
<td class="publish-label"><a href="{$BASE_URL}applicant/forgot/">{$translations.applicant_admin.forgot_password}</a></td>
</tr>
<tr>

I'm having trouble aligning headings in CSS.

I've tried creating a class like this -

Code:

.rightalign {
   text-align:right;
}

and applying it like this -

Code:

<h1> <span class="rightalign" /> Heading </span> </h1>

but it doesn't work, any help?

Thank you.

http://s125392025.websitehome.co.uk/layout.html

I'm making a layout, in this layout(as you can see), I have a SubNav and a main body part. Both of those sections, have a header image and a footer image.

Well, my body footer image isn't aligning directly with the main body. It's off by about 1 or 2px. I tried using: position:absolute; With a few different types of top, and bottom, but the picture only dissappears. I used the exact same line code for the footer image for the subnav, and it has aligned just fine. Here's the script if it matters. Could anyone help please?
PHP Code:
<!DOCTYPE html PUBLIC>
<html>
<head>
<title>2 Box Layout Test</title>

<style type="text/css" media="screen">
/* Here is the main CSS */
body { background: #FFFFFF; }
div { background: #FFFFFF; }
h5 { text-align:center; }
#mid, #left { top:120px; }
#midcontainer
{
width:400px;
margin:0 auto;
position:relative;
left:35px;
top:44px;
}
#midheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head400.jpg) top left no-repeat;height:30px;z-index:-1; }
#midfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot400.jpg) top left no-repeat; height:30px; }
#leftheader { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/head200.jpg) top left no-repeat;height:30px; }
#leftfoot { background:#000000 url(http://img.photobucket.com/albums/v237/The_Nyne/Site/foot200.jpg) top left no-repeat;height:30px; }

#midbody, #topbody, #leftbody { border:1px solid black;background: #a3a3a3; }
p.top1 { text-align:center; }
p.midheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:180px;
}
p.leftheadtxt
{
font-weight:bold;
text-align:center;
position: absolute;
top:-5px;
left:50px;
}
#leftcontainer
{
width:200px;
position:absolute;
left:5px;
top:150px;
}

</style>

</head>
<body>

<!--This is the main site header properties-->
<div id="top">
  <div id="topbody">
    <h5>Main Site Header</h5>
    <p class="top1">This is where the main image, and TopNav will go.</p>
  </div>
</div>

<!--This is where the main body text goes for the page-->
<div id="mid">
  <div id="midcontainer">
    <div id="midheader">
      <p class="midheadtxt">News</p>
    </div>
      <div id="midbody">
        <h5>Middle</h5>
        <p>This is where the main section of the site is located.</p>
      </div>
    <div id="midfoot">
    </div>
  </div>
</div>

<!--This is the subnav area-->
<div id="left">
  <div id="leftcontainer">
    <div id="leftheader">
      <p class="leftheadtxt">Sub-Navigation</p>
    </div>
      <div id="leftbody">
        <p>This is where the subnav is located.</p>
      </div>
    <div id="leftfoot">
    </div>
  </div>
</div>

</body>
</html> 

Ok well im new to these forums and ive been looking pretty much everywhere for help, so heres my problem. I bought a joomla template from a company, i got it then installed it, but im having one huge issue i cant seem to fix. The news is piling up next to each other instead of each new news post going above the older one in a nice neat line one post after another. Instead they just moosh together after the first post. I emailed the company and they said i had to edit the css and thats all the help i got. I have no knowledge of css and have no idea how to fix the issue. Any help would be greatly appreciated. A link to my site is below as well as the template css. Please someone help me with this problem.


http://almostfinite.info/pku


Code:

/*------------------------------------------------------------------------
# JA Sanidine II for Joomla 1.5 - Version 1.0 - Licence Owner JA98631
# ------------------------------------------------------------------------
# Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved.
# @license - Copyrighted Commercial Software
# Author: J.O.O.M Solutions Co., Ltd
# Websites:  http://www.joomlart.com -  http://www.joomlancers.com
# This file may not be redistributed in whole or significant part.
-------------------------------------------------------------------------*/

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {
	margin: 0;
	padding: 0;
}

body {
	background: #FFFFFF;
	color: #000000;
	font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
	line-height: 1.5;
}

body#bd {
	color: #333333;
	background-color: #CCCCCC;
	background-attachment: fixed;
        background-repeat: no-repeat;
	background-position: center top;
}

body.contentpane {
	color: #000000;
	font-size: 12px;
	line-height: 1.3em;
	margin: 0;
	margin: 1em 2em;
	width: auto; /* Printable Page */
}

body.fs1 {font-size: 10px;}
body.fs2 {font-size: 11px;}
body.fs3 {font-size: 12px;}
body.fs4 {font-size: 13px;}
body.fs5 {font-size: 14px;}
body.fs6 {font-size: 15px;}

/* Normal link */
a {
	color: #D58400;
	text-decoration: none;
}

a:hover, a:active, a:focus {
	color: #D58400;
	text-decoration: underline;
}

a img {
	border: none;
}

/* Title text */
.contentheading, .componentheading, .blog_more strong, h1, h2, h3, h4 {
	line-height: normal;
}

/* Small text */
small, .small, .smalldark, .article-meta, .modifydate, .img_caption p, .site-slogan, #ja-login,
a.readon, #ja-botnav, #ja-pathway, #ja-subnav, #ja-contentsl1, #ja-contentsl2, #ja-footer, #ja-col1, #ja-col2, #ja-botsl {
	font-size: 92%;
}

img {
	margin: 0;
	padding: 0;
}

.img_caption img {
	border: 1px solid #CCCCCC;
}

.img_caption p {
	text-align: center;
	color: #666666;
}

.img_caption.left, .img_caption.right {
	margin-top: 3px;
}

.no-caption {
	margin: 3px 0 3px 5px;
	border: 1px solid #CCCCCC;
}

/* Heading */
h1 {font-size: 200%;}
h2 {font-size: 175%;}
h3 {font-size: 150%;}
h4 {font-size: 125%;}

p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
	margin: 1em 0;
	padding: 0;
}

ul {
	list-style: none;
}

ul li {
	background: url(../images/bullet.gif) no-repeat 20px 6px;
	padding-left: 30px;
}

ol li {
	margin-left: 35px;
}

th {
	font-weight: bold;
	padding: 7px 8px;
	text-align: left;
}

fieldset {
	padding: 7px 5px 5px !important;
	border: none;
	margin: 1em 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

fieldset legend {
	font-weight: bold;
	background: #FFFFFF;
}

fieldset a {
	font-weight: bold;
}

fieldset.input {
	padding: 0;
	background: none;
}

hr {
	border-bottom: 0;
	border-left: 0;
	border-right: 0;
	border-top: 1px solid #CCCCCC;
	height: 1px;
}

br {
	height: 1px;
	font-size: 1px;
}

td, th, div {
	font-size: 100%;
}

/* FORM
--------------------------------------------------------- */
form {
	margin: 0;
	padding: 0;
}

form label {
	cursor: pointer;
}

input, select, textarea, .inputbox {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 100%;
}

textarea, textarea.inputbox {
	background: #FFFFFF;
	color: #333333;
	border: 1px solid #DDDDDD;
}

.inputbox {
	padding: 3px 2px;
	border: 1px solid #DDDDDD;
	background: url(../images/input-bg.gif) repeat-x top #FFFFFF;
	color: #333333;
	font-size: 100%;
}

.button {
	padding: 3px 8px 2px;
	border: 1px outset #CCCCCC;
	background: url(../images/grad-1.gif) repeat-x top #D58400;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 92%;
	font-weight: bold;
}

.button:hover {
	border: 1px inset #CCCCCC;
}

select#ordering, select#limit {
	background-image: none;
}

* html .button { /*IE 6*/
	padding: 2px 5px !important;
}

*+html .button { /*IE 7*/
	padding: 2px 5px !important;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator, .article_seperator {
	clear: both;
	display: block;
	height: 30px;
	margin: 0;
	background: url(../images/sep.gif) repeat-x center;
}

.column_separator {
	padding: 0 25px;
}

/* content tables */
.sectiontableheader {
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border: 1px solid #DDDDDD;
	padding: 6px 8px;
	color: #FFFFFF;
	font-weight: bold;
}

.sectiontableheader a,
.sectiontableheader a:hover,
.sectiontableheader a:active,
.sectiontableheader a:focus {
	color: #FFFFFF;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
	padding: 8px;
	background: url(../images/sep.gif) repeat-x bottom;
}

table.contentpane {
	border: none;
	width: 100%;
}

table.contentpaneopen {
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
}

table.contenttoc {
	margin: 0 0 10px 10px;
	padding: 0;
	width: 30%;
	float: right;
}

table.contenttoc td {
	background: url(../images/bullet.gif) no-repeat 12px 8px;
	padding: 1px 5px 1px 20px;
}

table.contenttoc th {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 0 0 3px;
	text-indent: 5px;
}

table.poll {
	border-collapse: collapse;
	padding: 0;
	width: 100%;
}

table.pollstableborder {
	border: none;
	padding: 0;
	text-align: left;
	width: 100%;
}

table.pollstableborder img {
	vertical-align: baseline;
}

table.pollstableborder td {
	border-collapse: collapse;
	border-spacing: 0;
	padding: 4px !important;
	background: none;
}

table.pollstableborder tr.sectiontableentry1 td {
}

table.searchintro {
	padding: 10px 0;
	width: 100%;
}

table.searchintro td {
	padding: 5px!important;
}

.blog_more {
	margin: 15px 0 0;
	padding: 15px 0 0;
	background: url(../images/sep.gif) repeat-x top;
}

.blog_more strong {
	display: block;
	margin: 0 0 5px;
	text-transform: uppercase;
}

.blog_more ul {
	margin: 0;
	padding: 0;
}

.blog_more ul li {
	background: url(../images/bullet.gif) no-repeat 4px 8px;
	margin: 0;
	padding: 0 0 0 12px;
}

.category {
	font-weight: bold;
}

h1.componentheading, .componentheading {
	font-size: 250%;
	margin: 0 0 15px;
	padding: 0;
	color: #D58400;
}

.contentdescription {
	padding-bottom: 30px;
}

h2.contentheading, .contentheading {
	margin: 0;
	padding: 0;
	font-size: 200%;
	color: #008EBF;
}

table.blog .contentheading {
	font-size: 135%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
	color: #008EBF;
}

a.readon {
	font-weight: bold;
	text-transform: uppercase;
}

a.readon:hover, a.readon:focus, a.readon:active {
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
	width: 100%;
}

.moduletable {
	padding: 0;
}

ul.pagination {
	margin: 20px auto;
	padding: 20px 0 0;
	color: #666666;
}

ul.pagination li {
	background: none;
	display: inline;
	margin: 0;
	padding: 0;
}

ul.pagination li span {
	padding: 2px 5px;
}

ul.pagination a {
	padding: 2px 5px;
	text-decoration: none;
	background: url(../images/grad-4.gif) repeat-x top;
	color: #666666;
	border: 1px solid #DDDDDD;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
	background: #D58400;
	color: #FFFFFF;
}

.pagenavbar {
	background: url(../images/icon-pages.gif) no-repeat center left;
	font-weight: bold;
	padding-left: 14px;
}

.pagenavcounter {
	background: url(../images/icon-pages.gif) no-repeat 0 11px;
	font-weight: bold;
	padding: 8px 14px 0 14px;
}

.smalldark {
	text-align: left;
}

div.syndicate div {
	text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
	background: none;
}

ul.latestnews a, ul.mostread a {
}

/* META
--------------------------------------------------------- */
.article-toolswrap {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	position: relative;
}

.article-tools {
	display: block;
	padding: 0 10px 0 0;
}

.article-meta {
	width: 70%;
	float: left;
	margin-top: 3px;
	color: #666666;
}

.createby {
	font-weight: bold;
}

.createdate {
	padding-right: 6px;
	margin-right: 5px;
	background: url(../images/vline.gif) no-repeat right;
}

.createdate-icon { /*for clendar style*/
	margin: 0 10px 0 0;
	display: block;
	float: left;
	width: 40px;
	height: 38px;
	text-align: center;
	border: 1px solid #CCCCCC;
	background: #F8F8F8;
	color: #666666;
}

.ja-date {
	font-size: 15px;
	font-weight: bold;
}

.ja-month {
	color: #666666;
	font: 9px/14px Arial, Helvetica , sans-serif;
	text-transform: uppercase;
	display: block;
	letter-spacing: 1px;
	background: url(../images/grad-4.gif) repeat-x top #999999;
	border-bottom: 1px solid #CCCCCC;
}

.modifydate {
	width: 100%;
	display: block;
	color: #D58400;
	margin: 15px 0;
}

.article-section {
	padding-left: 6px;
	margin-left: 5px;
	background: url(../images/vline.gif) no-repeat left center;
}

.article-section a {
	color: #666666;
}

.article-category a {
	color: #666666;
}

div.buttonheading {
	position: absolute;
	top: 0;
	right: 10px;
}

.buttonheading img {
	margin: 0 0 0 5px;
	border: 0;
	float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
	width: 950px;
	margin: 0 auto;
	clear: both;
	background: url(../images/wrapper-bg.png) repeat-y center;
}

.narrow #ja-wrapper {
	width: 750px;
	background: url(../images/wrapper-bg-n.png) repeat-y center;
}

#ja-container {
	padding: 5px 20px;
}

#ja-mainbody {
	width: 70%;
	float: left;
}

/* PRIMARY COLUMN
--------------------------------------------------------- */
#ja-content {
	clear: both;
	display: block;
	float: right;
	width: 70%;
	background: url(../images/content-center3.gif) repeat-y center #FFFFFF;
}

#ja-content-top {
	background: url(../images/content-top3.gif) no-repeat center top;
}

#ja-content-bot {
	background: url(../images/content-bot3.gif) no-repeat center bottom;
}

.narrow #ja-content {
	background: url(../images/content-center3-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-content-top {
	background: url(../images/content-top3-n.gif) no-repeat center top;
}

.narrow #ja-content-bot {
	background: url(../images/content-bot3-n.gif) no-repeat center bottom;
}

#ja-current-content {
	padding: 20px;
	margin: 0;
}

/* COLUMNS
--------------------------------------------------------- */
#ja-col1 {
	float: left;
	overflow: hidden;
	width: 30%;
}

#ja-col1 div.ja-innerpad {
	padding-right: 5px;
}

#ja-col2 {
	float: right;
	overflow: hidden;
	width: 30%;
}

#ja-col2 div.ja-innerpad {
	padding-left: 5px;
}

/*common style for column*/


/* COLLAPSIBLE LAYOUT
--------------------------------------------------------- */
#ja-containerwrap,
#ja-containerwrap-fr,
#ja-containerwrap-fl,
#ja-containerwrap-f {
	clear: both;
}

/*content + left*/
#ja-containerwrap-fr #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-fr #ja-col1 {
	width: 22%;
}

#ja-containerwrap-fr #ja-content {
	width: 78%;
	background: url(../images/content-center2.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2.gif) no-repeat center top;
}

#ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fr #ja-content {
	background: url(../images/content-center2-n.gif) repeat-y center #FFFFFF;
}

.narrow #ja-containerwrap-fr #ja-content-top {
	background: url(../images/content-top2-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fr #ja-content-bot {
	background: url(../images/content-bot2-n.gif) no-repeat center bottom;
}

/*content + right*/
#ja-containerwrap-fl #ja-content {
	width: 100%;
	background: url(../images/content-center.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top.gif) no-repeat center top;
}

#ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot.gif) no-repeat center bottom;
}

.narrow #ja-containerwrap-fl #ja-content {
	background: url(../images/content-center-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-fl #ja-content-top {
	background: url(../images/content-top-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-fl #ja-content-bot {
	background: url(../images/content-bot-n.gif) no-repeat center bottom;
}

/*full*/
#ja-containerwrap-f #ja-mainbody {
	width: 100%;
}

#ja-containerwrap-f #ja-content {
	width: 100%;
	background: url(../images/content-center1.gif) repeat-y center #FFFFFF;
}

#ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1.gif) no-repeat center top;
}

#ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1.gif) no-repeat center bottom;
}

#ja-containerwrap-f #ja-current-content {
	padding-left: 20px;
	padding-right: 20px;
}

.narrow #ja-containerwrap-f #ja-content {
	background: url(../images/content-center1-n.gif) repeat-y center;
}

.narrow #ja-containerwrap-f #ja-content-top {
	background: url(../images/content-top1-n.gif) no-repeat center top;
}

.narrow #ja-containerwrap-f #ja-content-bot {
	background: url(../images/content-bot1-n.gif) no-repeat center bottom;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable h3 {
	margin: 0 -8px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #333333;
	background: url(../images/h3-bg.gif) no-repeat left;
	text-transform: uppercase;
}

div.moduletable h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.moduletable {
	margin: 0;
	padding: 0 15px;
}

div.module h3,
div.module_text h3,
div.module_menu h3,
div.module_hilite h3,
div.ja-box-br h3 {
	margin: 0 -6px 10px;
	padding: 0 0 0 30px;
	font-size: 100%;
	height: 28px;
	line-height: 28px;
	color: #FFFFFF;
	background: url(../images/h3-bg.gif) no-repeat left #333333;
	text-transform: uppercase;
}

div.module h3 span,
div.module_text h3 span,
div.module_menu h3 span,
div.module_hilite h3 span,
div.ja-box-br h3 span {
	display: block;
	height: 28px;
	background: url(../images/h3-bg.gif) no-repeat right;
}

div.module,
div.module_text,
div.module_menu,
div.module_hilite,
div.ja-box-br {
	padding: 0;
	float: left;
	clear: both;
	width: 100%;
	background: url(../images/box-br.gif) no-repeat bottom right #FFFFFF;
	overflow: hidden;
	margin-bottom: 5px;
}

div.module div,
div.module_text div,
div.module_menu div,
div.module_hilite div,
div.ja-box-bl {
	margin: 0;
	padding: 0;
	background: url(../images/box-bl.gif) no-repeat bottom left;
}

div.module div div,
div.module_text div div,
div.module_menu div div,
div.module_hilite div div,
div.ja-box-tr {
	padding: 0;
	margin: 0;
	background: url(../images/box-tr.gif) no-repeat top right;
}

div.module div div div,
div.module_text div div div,
div.module_menu div div div,
div.module_hilite div div div,
div.ja-box-tl {
	padding: 15px 20px 15px;
	background: url(../images/box-tl.gif) no-repeat top left;
}

div.module div div div div,
div.module_text div div div div,
div.module_menu div div div div,
div.module_hilite div div div div {
	margin: 0;
	padding: 0;
	background: none;
}

/* mis */
div.banneritem_text {
	padding: 5px 0 !important;
}

div.advs {
	clear: both;
	display: block;
	float: left;
	width: 100%;
}

div.moduletable li,
div.moduletable_menu li,
div.moduletable_text li,
div.module li,
div.module_menu li,
div.module_text li {
	padding-left: 15px;
	background-position: 5px 7px;
}

/* HEADER
--------------------------------------------------------- */
#ja-header {
	line-height: normal;
	position: relative;
	padding: 0;
	margin: 0 10px;
	z-index: 999;
	height: 127px;
	background: url(../images/header-bg.gif) repeat-x 0 19px #FFFFFF;
	border-top: 1px solid #CCCCCC;
	border-bottom: 3px solid #D58400;
}

h1.logo, div.logo-text {
	margin: 0 20px;
	padding: 0;
}

h1.logo {
	width: 330px;
	height: 70px;
	position: absolute;
	top: 10px;
}

h1.logo a {
	width: 330px;
	height: 70px;
	display: block;
	background: url(../images/logo.png) no-repeat center;
}

h1.logo a span {
	position: absolute;
	top: -1000px;
}

div.logo-text {
	outline: none;
	position: absolute;
	top: 20px;
}

div.logo-text h1 {
	font-size: 250%;
	font-weight: bold;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
}

div.logo-text h1 a {
	color: #333333;
}

.site-slogan {
	color: #666666;
	margin: 0;
	padding: 0;
}

#ja-topnav {
	position: absolute;
	top: 10px;
	right: 40px;
}

#ja-topnav ul {
	margin: 0;
	padding: 2px 0;
}

#ja-topbar {
	background: url(../images/grad-3.gif) repeat-x top #2F2F2F;
	height: 25px;
	margin: 0 10px;
	position: relative;
}

/* MAIN NAVIGATION
--------------------------------------------------------- */
#ja-mainnav {
	height: 40px;
	position: absolute !important;
	bottom: 0px;
	left: 0;
	z-index: 999;
	width: 100%;
	background: url(../images/mainnav-bg.gif) repeat-x bottom;
}

#ja-mainnav a, #ja-subnav a {
	outline: none;
	line-height: normal;
}

#ja-subnav {
	clear: both;
	background: url(../images/subnav-bg.gif) repeat-x bottom #D58400;
	margin: 0 10px;
	padding: 0 10px;
	height: 30px;
}

#ja-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#ja-subnav li {
	background: none;
	margin: 0;
	padding: 0;
	display: inline;
}

#ja-subnav a {
	display: block;
	float: left;
	outline: none;
	padding: 0 15px;
	line-height: 30px;
	text-decoration: none;
	color: #FFFFFF;
}

#ja-subnav a:hover,
#ja-subnav a:active,
#ja-subnav a:focus {
	color: #FFFFFF;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

#ja-subnav li.active a {
	color: #FFFFFF !important;
	font-weight: bold;
	background: url(../images/subnav-hover.gif) no-repeat center bottom;
	text-decoration: none;
}

/* breadcrumbs */
#ja-pathway {
	padding-top: 3px;
	color: #999999;
	text-indent: 15px;
}

#ja-pathway strong {
	margin-right: 5px;
}

#ja-pathway img {
	margin: 1px 5px;
}

/* Default Joomla! Menu */
ul.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: block;
}

ul.menu li {
	display: block;
	background: url(../images/sep.gif) repeat-x bottom;
	margin: 0;
	padding: 0 0 2px;
	line-height: normal;
}

ul.menu li a {
	display: block;
	outline: none;
	padding: 8px 2px;
	margin: 0;
	text-decoration: none;
	color: #333333;
	font-weight: bold;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li.active a {
	font-weight: bold;
}

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

ul.menu li li {
	border: none;
	background: none;
	padding: 0;
}

ul.menu li li a {
	border: none;
	padding: 2px 5px 8px 15px !important;
	text-transform: none;
	font-weight: normal !important;
	background: url(../images/arrow.png) no-repeat 8px 6px !important;
	color: #333333;
}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
	color: #D58400;
	text-decoration: underline;
}

ul.menu li li.active a {
	color: #D58400;
	font-weight: bold;
}

ul.menu li li li a {
	color: #333333 !important;
	font-weight: normal !important;
	padding-left: 25px !important;
	background: url(../images/arrow.png) no-repeat 18px 6px !important;
}

ul.menu li li li.active a {
	font-weight: bold !important;
}

/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
	float: left;
	overflow: hidden;
}

.ja-box-left div.module, .ja-box-center div.module {
}

/* Top spotlight */
#ja-topsl {
	clear: both;
	margin: 0 10px;
	padding: 0;
	height: 310px;
	background: url(../images/topsl-bg.gif) repeat-x bottom #1D1D1D;
	overflow: hidden;
}

#ja-topsl1 {
	float: left;
	width: 70%;
	overflow: hidden;
}

#ja-topsl1 div#ja-slideshowwrap {
	margin: 20px 10px;
}

#ja-topsl2 {
	float: right;
	width: 30%;
	overflow: hidden;
}

#ja-topsl2 div.moduletable h3, #ja-topsl2 div.moduletable h3 span {
	background-image: url(../images/h3-bg-d.gif);
}

#ja-topsl2 div.moduletable {
	margin: 20px 0 0;
}

/* Content spotlight */
#ja-contentsl1 {
	clear: both;
	width: 100%;
	padding: 0 0 5px;
}

#ja-contentsl2 {
	clear: both;
	margin: 0;
	padding: 5px 0;
}

#ja-contentsl1 div.module, #ja-contentsl2 div.module {
	margin: 0;
}

#ja-contentsl1 div.module h3, #ja-contentsl1 div.module h3 span,
#ja-contentsl2 div.module h3, #ja-contentsl2 div.module h3 span {
	background: none;
	color: #333333;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

#ja-contentsl1 ul.latestnews, #ja-contentsl1 ul.mostread {
	margin: 0;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

#ja-contentsl1 li.latestnews, #ja-contentsl1 li.mostread {
	background: url(../images/sep.gif) repeat-x bottom;
	padding: 4px 2px 6px;
}

#ja-contentsl1 li.latestnews a, #ja-contentsl1 li.mostread a {
	background: url(../images/icon-pages.gif) no-repeat left center;
	padding-left: 15px;
}

/* Bottom spotlight */
#ja-botsl {
	clear: both;
	margin: 0 10px;
	padding: 15px 5px;
	background: url(../images/grad-2.gif) repeat-x top #373737;
	border-top: 1px solid #1D1D1D;
	border-bottom: 1px solid #1D1D1D;
	color: #999999;
}

#ja-botsl div.moduletable h3, #ja-botsl div.moduletable h3 span {
	background: none;
	color: #FFFFFF;
	height: auto;
	line-height: normal;
	padding-left: 4px;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footer {
	clear: both;
	position: relative;
	padding: 8px 20px;
	margin: 0 10px;
	color: #666666;
	text-align: center;
	border-top: 1px solid #1D1D1D;
}

#ja-footer small {
	font-size: 100%;
}

#ja-botnav {
	background: #1D1D1D;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	clear: both;
	margin: 0 10px;
	padding: 5px 0;
	text-align: center;
}

#ja-botnav ul {
	margin: 0;
	padding: 0;
}

#ja-botnav li {
	margin: 0;
	padding: 0 10px;
	background: url(../images/vline.gif) no-repeat left center;
	display: inline;
}

#ja-botnav li a {
	color: #999999;
}

#ja-botnav li a:hover, #ja-botnav li a:active, #ja-botnav li a:focus {
	color: #FFFFFF;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
	position: absolute;
	top: -100%;
}

li.ja-firstitem {
	background: none !important;
}

.padding-none ul.film li {
	margin-left: 0;
}

#ja-tabs {
	margin: 0 0 10px 0;
	padding: 0;
}

#ja-tabs div {
	margin: 0;
	padding: 0;
}

#ja-tabs div.module {
	background: url(../images/box-br-w.gif) no-repeat bottom right #FFFFFF;
}

#ja-tabs div.module div {
	background: url(../images/box-bl-w.gif) no-repeat bottom left;
}

#ja-tabs div.module div div {
	padding: 0;
	background: url(../images/box-tr-w.gif) no-repeat top right;
}

#ja-tabs div.module div div div {
	background: url(../images/box-tl-w.gif) no-repeat top left;
}

#ja-tabs div.module div div div div {
	background: none;
}

/* Login */
#ja-login {
	position: absolute;
	right: 30px;
	top: 25px;
	color: #666666;
}

label.ja-login-user span,
label.ja-login-password span {
	display: block;
	width: 25px;
	height: 24px;
	float: left;
	text-indent: -5000px;
}

label.ja-login-user span {
	background: url(../images/icon-user.png) no-repeat;
}

label.ja-login-password span {
	background: url(../images/icon-key.png) no-repeat;
}

#ja-login label {
	float: left;
}

#ja-login form #mod_login_username,
#ja-login form #mod_login_password {
	width: 100px;
	margin: 2px 0 0 5px;
	font-size: 11px !important;
	border: 1px solid #CCCCCC;
}

#ja-login form #mod_login_password {
	margin-right: 5px;
}

#ja-login form .button {
	margin-top: 2px;
}

.ja-login-links {
	display: block;
	clear: both;
	padding: 6px 0 0;
	font-size: 92%;
}

.ja-login-links a {
	padding: 0 5px;
	color: #666666;
}

/*usertools*/
#ja-usertools {
	position: absolute;
	right: 10px;
	top: 8px;
}

#ja-usertools ul {
	margin: 0;
	padding: 0 10px 0 0;
	display: inline;
}

#ja-usertools ul li {
	margin: 0;
	padding: 0 2px;
	float: right;
	background: none;
}

/* Search */
#ja-search {
	background: url(../images/search-bg.gif) no-repeat left;
	position: absolute;
	right: 0;
	top: 0;
	height: 25px;
	padding-left: 35px;
	font-size: 11px;
}

#ja-search .inputbox {
	margin: 3px 3px 0 0;
	width: 150px;
	background: transparent;
	border: none;
	color: #999999;
}

#ja-search .button {
	font-size: 11px;
}

/*others*/
#ja-banner {
	padding: 5px 0 0;
	text-align: center;
	overflow: hidden;
	width: 100%;
	clear: both;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
	background: none!important;
	display: block;
	margin: 10px 0;
	text-decoration: none!important;
}

.clr {
	clear: both;
}

.hasTip img {
	border: none;
}

div.ja-innerdiv {
	padding: 8px 0 10px !important;
	background: url(../images/sep.gif) repeat-x bottom !important;
}

div.ja-innerdiv img.border {
	padding: 2px;
	border: 1px solid #CCCCCC;
	margin-right: 10px;
}

div.ja-innerdiv img {
	margin: 5px 0 0 5px;
}

div.module blockquote {
	margin: 0;
	padding: 0;
}

div.module span.title {
	font-weight: bold;
	display: block;
	margin: 5px 0;
}

/* Tooltips */
.tool-tip {
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	float: left;
	max-width: 200px;
	padding: 5px;
	z-index: 999;
	color: #333333;
}

.tool-title {
	background: url(../../system/images/selector-arrow.png) no-repeat;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	margin-top: -15px;
	padding: 0;
	padding-bottom: 5px;
	padding-top: 15px;
}

.tool-text {
	font-size: 100%;
	margin: 0;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
	margin: 0 10px;
	padding: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
	background: none;
	color: #FFFFFF;
	margin: 0;
	padding: 5px;
}

/* System Standard Messages */
#system-message dd.message ul {
	background: #333333;
	border: none;
}

/* System Error Messages */
#system-message dd.error ul {
	background: #CC0000;
	border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
	background: #D58400;
	border: none;
}

/* Clearfix */
.clearfix:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

* html > body .clearfix {
	display: block;
	width: 100%;
}

* html .clearfix {
	height: 1%;
}

How would I prefectly fit a table or div against the edge of a browser without any white space?

I've tried setting the margin border to 0px without any success.

ive searched google throughout and im blank on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

div
{
	width:70%;
	margin:0 auto;
	height:20em;
	border:.4em solid black;
}
p
{
	border:.4em solid black;
	margin:0 auto;
	line-height:8em;
	display:inline;
	width:55%;
	height:8em;
}
span
{
	display:block;
	color:red;
	font-size:2em;
	width:60%;
	margin:0 auto;
	text-align:center;
}
</style>
</head>
<body>
<div>
	<p>
		<span>X</span>
	</p>
</div>
</body>
</html>

I need the outer box to be vertiacllly aligned within the viewport, the other boxes vertically aligned within each other. does that make sense? I thought u could do it with line-height but i can't get it working. fresh eyes?

Edit: New code there.

The site is located at:
http://68.41.210.39:8081/empcoBeta/index.html

Why is it that the site displays fine in safari, netscape, mozilla/firefox etc, but is totally screwed in windowze IE?

The css is as follows:

#under
{
width:84%;
height:1%;
background-color:#1E77D3;
position:absolute;
top:5%;
left:16%;
}
#mainleft
{
width:35%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
left:22%
}
#mainright
{
width:40%;
background-color:white;
vertical-align:top;
position:absolute;
top:10%;
right:2%
}
body
{
font-family: sans-serif;
font-size: 12px;
}
.indented1
{
padding-left: 5pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}
.indented2
{
padding-left: 10pt;
padding-right: 5pt;
font-size: 12px;
font-family: sans-serif;
}

a:link {color: #17507e; font-size: 2; text-decoration: none; }
a:active {color: blue; font-size: 2; text-decoration: none;}
a:visited {color: #17507e; font-size: 2; text-decoration: none;}
a:hover {color: blue; font-size: 4; font-weight: bold; text-decoration: none;}

#column
{
width:1%;
height:81%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:15%;

}
#leftsidebar1
{
width:100%;
height:5%;
background-color:#B4CCEB;
position:absolute;
top:0%;
left:0%;

}
#leftbar1
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:5%;
left:0%;

}
#leftsidebar2
{
width:16%;
height:2%;
background-color:#B4CCEB;
position:absolute;
top:40%;
left:0%;

}
#leftbar2
{
width:15%;
height:40%;
background-color:#CEDFFF;
position:absolute;
top:41%;
left:0%;

}
#leftsidebar3
{
width:16%;
height:1%;
background-color:#B4CCEB;
position:absolute;
top:81%;
left:0%;

}
#credits
{

position: absolute;
left:1%;
bottom:20%;

}
.tcredits
{
text-align: left;
font-size: 9px;
font-family: sans-serif;
}

Hi,

I'm relatively new to CSS and while I'm aware that you should code for Firefox and fix for IE, I'm having problems with what I am sure is a very simple bit of coding.

The css is just a simple layout:

Code:

body {
font-family : Arial, Helvetica, sans-serif;
font-size : 12px;
text-align : center;
background-image : url(../_images/grad_bkg.jpg);
color : #000000;
}

#wrapper {
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
padding : 15px 0 0 0;
width : 888px;
}

#header {
text-align : center;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 83px;
background-image : url(../_images/gbc_banner.jpg);
}

#navigation {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 25px;
background-image : url(../_images/menu.gif);
background-repeat : no-repeat;
}

#mainimage {
display:inline;
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 331px;
}

#divide {
text-align : center;
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
height : 5px;
background-color : #000000;
}

#content {
margin-top : 5px;
margin-left : auto;
margin-right : auto;
width : 835px;
}

#footer {
clear : both;
text-align : center;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
width : 888px;
height : 218px;
background-image : url(../_images/footer.jpg);
}

but in the mainimage div I am inserting the following table and it is not displaying correctly in FF:

Code:

    <table width="835" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
        <td width="215" height="270"><img src="_assets/_images/rangemaster_img_link.jpg" width="215" height="270" /></td> 
        <td width="190" height="270"><img src="_assets/_images/falcon_img_link.jpg" width="190" height="270" /></td> 
        <td width="232" height="331" rowspan="2"><img src="_assets/_images/aga_img_link.jpg" width="232" height="331" /></td> 
        <td width="198" height="331" rowspan="2"><img src="_assets/_images/rayburn_img_link.jpg" width="198" height="331" /></td> 
      </tr> 
      <tr> 
        <td colspan="2" height="61" bgcolor="#000000"><img src="_assets/_images/companion_txt.gif" width="405" height="61" /></td> 
      </tr> 
    </table>

s anyone able to give me a pointer?

Thanks....

http://206.169.23.2/index3.htm
http://206.169.23.2/style3.css

The two columns are as far apart from each other as they can be. I want them to centered, and next to each other. How can this be done?

I used float:right; and float:left for starters but I can not get the columns any closer to each other.

Any help is greatly appreciated,
- mike