Hi Guys!

Im having trouble with my page. Im using Frontpage for a schoolproject im working on. And i would appreciate help getting my navigationsmeny to be to the left, and the text (#cont) on the right - either floating or something else. Iv'e tried as far my knowledge and patience reaches, but it wont work for me :'|

Here's an image that shows the problem



Uploaded with ImageShack.us

I want the text to be on the right, and the navmeny on the left. Using either floating or something else. As i said, tried as far as my knowledge reaches
Oh well heres the code.


The page:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="JavaScript" src="Javascript/tid.js">
</script> <!-- länk till javascript -->
<script type="text/javascript" src="Javascript/iepngfix_tilebg.js"></script>
<title>Tannbergskolan 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Robots" content="NOINDEX" />
<meta http-equiv="PRAGMA" content="NO-CACHE" /><!--
  Web Site: www.ssi-developer.net
  Comments: Copyright 2003 www.ssi-developer.net
  Licence:  Creative Commons - Non-commercial Share-Alike -->
<link rel="stylesheet" type="text/css" href="CSS/CSS-layout.css" />
<link rel="stylesheet" type="text/css" href="CSS/CSS-presentation.css" />
</head>

<!-- Body -->
<body background="Images/bg.jpg" onload="clock();" onunload="stop();">




<div id="outer">
<div id="hdr" onclick="location.href='index.html';" style="cursor:pointer;"> <!-- Header -->

</div> <!-- end Header -->
<div id="divider"> <!-- divider-->
</div> <!-- end divider-->

<div id="bar"> <!-- Bar -->
	<span style="padding:5px;font-size:11px;">
		<script type="text/javascript"> <!-- Datumscript -->
		document.write ( day_names[current_date.getDay()] );
		document.write ( ", " );
		document.write (current_date.getDate() );
		document.write ( ", " +  month_names[current_date.getMonth()] );
		document.write ( " - " );
		</script> <!-- end Datumscript -->
		
			<span id="clock"> <!-- Tidscript -->
			</span> <!-- end Tidscript -->
			
	</span>

</div> <!-- end Bar -->

<div id="divider"> <!-- divider-->
</div> <!-- end divider-->

<!-- Bodyblock -->
<div id="bodyblock">
	<div id="l-col" align="left"> <!-- Left Column -->
	<table id="border-meny" width="132"><td></td></table>
<table width="140" cellspacing="0" cellpadding="0" bgcolor="#26a2da"> <!-- Navigationsmeny -->

(ALOT OF CODE, its the navmeny with tables and etc, viewable on the screens)

</table> <!-- end Navigationsmeny -->
			
</div> <!-- end Left Column -->
	
	

<!-- Content-->
<div id="cont"> 
	<h3>Nyheter och artiklar</h3> <!-- H3 -->
			
		<p>
			This template is actually a replica of one of my other
			websites which uses tables for the very same layout. I wanted to
			see could it be done and it seems to work perfect.
		</p>
			
		<p>
			This is basically set up as follows: there is a main outer div
			which centers the page and is a fixed width. There are 4 main
			div's within this outer div; header (#hdr), bar (#bar), body
			(#body) and footer (#ftr). The body div holds 2 more divs, the
			left div which is for navigation and the right div which is for
			our content.
		</p>
		
		<p>
			One drawback we see immediatly is getting equal heights for
			the left navigation div and right content div. The work around I
			use for this is: whichever is likely to be the shortest (in
			height) div, probably the left navigation div, set the background
			of the #body div the same as this, also the border separating the
			two divs - that should be on the right content div.
		</p>
			
		<p>
			Another problem discovered recently was that when you use the
			float property it can cause the floated divs to "jump out" of
			their container block. The workaround I found for this was simply
			to specify a height for the container div.
		</p>
		<p>
			Another problem discovered recently was that when you use the
			float property it can cause the floated divs to "jump out" of
			their container block. The workaround I found for this was simply
			to specify a height for the container div.
		</p>
</div><!-- end Content   -->


</div> <!-- end Bodyblock -->

<div id="divider2"> <!-- divider-->
</div> <!-- end divider-->

<div id="ftr" align="center"> <!-- Footer -->
			Copyright (c) </div>
</div>

</body> <!-- end Body -->
</html>

And the CSS



Code:
/* Layout Stylesheet */ 


body {
 margin:126px 0 0 0;
 background-color:#ffffff;
 background-position:center top;
 background-repeat: no-repeat;
 text-align:center;
 padding:0;

 }

#outer {
 text-align:left;
 width:675px;
 margin:auto;
 }

#hdr {
 height:101px;
 }
 
#divider{
 height:4px;
 }
 	#divider2{
 	height:20px;
 	}
 
 #bar {
 height:16px;
 color:#ffffff;
 }

#bodyblock {
 position:relative;
 width:675px; 

#l-col {
 float:left;
 width:auto;
 height:auto;
 }

#cont {
 width:auto;
 height:auto; 
 }

#ftr {
 height:20px;
 background:#26bafa;
 border:1px solid #FFFFFF;
 border-width: 1px 0 1px 0;
 margin:0;
 }
Other CSS file...

Code:

/* Presentation Stylesheet */ 

/* Text */

h3{
 font-family: Tahoma;
 margin:0;
 padding:15px;/*
 padding-left:240px;*/
 }

h4 {
 margin:0; 
 padding: 5px 0;
 align:center;
 }
 
p{
 padding-left:20px;
 padding-right:10px;
 padding-bottom:10px;
 font-family: calibri;
 font-size:1em;
}


p:first-letter {
 font-size: 1.15em;
 letter-spacing:0px;
 font-weight: bold;
}




/* Bilder, Tables osv */

img.menyicons{
 vertical-align:middle; 
 width:19; 
 height:19;
}
	 
a.meny{
 font-size:0.7em;
 font-family: verdana;
}
 
a.meny:link, a.meny:visited {text-decoration:none; color:white;}      /* unvisited link */
 	/*a.meny:visited {color:#000000; text-decoration:none;} */
a.meny:hover {text-decoration:none;}  /* mouse over link */
	 
tr{
height:24px;
}

#border-meny{
cellspacing:0;
cellpadding:0;
width:25px;
height:30px;
border:0px;
border-right:1px solid #ffffff;

}

td.meny-toptd{
font-family: Verdana, Arial, sans-serif;
font-size:14px;
border:1px;
border-style:solid;
border-color:#ffffff;
height:23px;
}

td.meny{
font-family: Verdana, Arial, sans-serif;
font-size:14px;
border-bottom: 1px;
border-top: 0px;
border-right: 1px;
border-left: 1px;
border-style:solid;
border-color:#ffffff;
}

Would appreciate help Alot