Im trying to create a two coloum news page layout on this page:
http://www.outer-edge.com.au/development_site/news.html but I cant seem to remove the gap from the title and the news text in the 2nd colum??

<div id="news">
  <div id="news_content">
    <div id="news_COL1">
      <div id="news_title">Big Blue Adventure Fest</div>
	<p>This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival - The Australian Climbing Festival - will be held for the first time.</p>
    </div>
    <div id="news_title">Kayakers Still Ready and Able for Tasman</div>
    <p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>	
  </div>
</div>

First off, you should probably be using soemthing like h1 to h6 instead of the div for the title, secondly your CSS states this:

#news_COL1 p {
width: 350px;
margin: 0px;
}

This only refers to your left column, you right cloumn is unaffected by this because you close up the div before hand.
Also you have a news_COL2 id, but don't actually use it. It also doesn't have any properties for the p element defined.

I have now tried using a list however I can't seem to setup the 2 colums side by side. It works perfectly in IE 7:

http://www.outer-edge.com.au/development_site/news.html

I bascially want to set up a 2 colum layout where each news item has a small thumb nail image set at the top left of the title.

Any ideas?

HTML

<div id="news">
<div id="news_content">

<ul class="left">
<li class="left"><h5>Big Blue Adventure Fest</h5>
This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival -
The Australian Climbing Festival - will be held for the first time.</li>

</ul>

<ul class="right">
<li><h5>Kayakers Still Ready and Able for Tasman</h5>
The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</li>
</ul>
</div>

</div>

CSS

#news ul.left {
width: 250px;
float: left;
padding-right: 40px;
}
#news li {
list-style: none;
}
#news ul.right {
width: 250px;
}
#news h5 {
color: #FF6600;
margin: 0px;
font-size:12px;
}
#news_content {
height: auto;
font-size: 12px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
background-color: #FFFFFF;
text-align: justify;
}

Remove this rule to make 2 coloumns

#news ul.right {
width: 250px;
}

And add

#news h5 {
color: #FF6600;
margin: 0px;
font-size:12px;
padding:0 0 0 100px;
background-image:url(image.gif) right center no-repeat; /* for thumbnail */
}

Thanks for that. The colums work but I need to use a different thumb image for each list item. The image doesnt appear in firefox but does in IE7??

Add this..
background-image:url(image.gif) right center no-repeat; /* for thumbnail */
to classes and use those class for each li OR
use img within #news with float:left;

May be use include quote i.e. "image.gif" instead of image.gif and it may force FF not to show images.

Why are you using a list for your columns? Is it a list, no it is not a list.
Your first approach was better and working, why not stick with it and just fix what I said?

Ok, I've changed it to using div blocks, however I cant seem to get the 2 colum layout to work in Firefox. Works nicely in IE 7.

http://www.outer-edge.com.au/development_site/news.html

HTML

<div id="news_content">

<div id="news_COL1">

<h5 class="news1">Big Blue Adventure Fest</h5>
<p>This Easter (7–8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival -
The Australian Climbing Festival - will be held for the first time.</p>

</div>

<div id="news_COL2">

<h5>Kayakers Still Ready and Able for Tasman</h5>
<p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>

</div>

</div>


CSS

#news_content {
padding-left: 40px;
padding-right: 40px;
font-size: 12px;
}
#news_COL1 {
width: 300px;
float: left;
padding-right: 20px;
}
#news_COL2 {
width: 300px;
}
#news_content h5 {
color: #FF6600;
width: 300px;
}
#news_COL1 p, news_COL2 p {
text-align: justify;
margin: 0px;
}

Good start, now let's try this CSS on for size. I certainly didn't invent it, but I have been using it for a long time now to have two fixed columns.

  #news_content {
    overflow: hidden;
    width: 600px;
    }
  #news_COL1 {
    float: left;
    width: 300px;
    border-right: 300px solid #FFF;
    margin-right: -300px;
    }
  #news_COL2 {
    width: 300px;
    float: left;
    }

Should work, but I may have made a typo or something, was of the top of my dome.

I've updated the code with your code - however it didnt fix it

Now it doesnt work in both browsers :-(

Both browsers I guess you mean the awesome Opera and the second awesome Firefox, because it still works in IE.
You forgot a rule, the float on news_COL2, that should fix it, but may create errors with the bottom border that your using to create the angle, just a guess though, and should be easy enough to fix, but since I'm leaving for a long time tomorrow someone else will hopefully come along and help you.

I've finially managed to get this page right in IE 7, Firefox, Opera & Netscape, however in IE 6 the right colum overflows the page width...

can anyone help please?

http://www.outer-edge.com.au/development_site/news.html

HTML

<div id="news">
<div id="news_content">

<div id="news_COL1">

<img src="images/news_images/news1 - big blue.gif" height="90" width="115" alt="News Image" align="left" />
<h5>Big Blue Adventure Fest</h5>
<p>This Easter (7-8 April), in the breathtaking surrounds of NSW's Blue Mountains, the southern hemisphere's biggest adventure carnival - The Australian Climbing Festival - will be held for the first time.</p>

</div>

<div id="news_COL2">
<img src="images/news_images/news1 - kayakers.gif" height="90" width="115" alt="News Image" align="left" />
<h5>Kayakers Still Ready and Able for Tasman</h5>
<p>The disappearance, and presumed death, of trans-Tasman kayaker Andrew McAuley has not dissuaded two young Sydney men from making their own attempt at taking on the 2,200km of wild waves that lie between Australia and New Zealand.</p>

</div>

</div>
</div>


CSS

#news {
background: url(images/white_bg_top.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
height: auto;
width: 800px;
padding-top: 100px;
}

#news_content {
padding-left: 40px;
padding-right: 40px;
font-size: 12px;
overflow: hidden;
}
#news_COL1 img, #news_COL2 img {
padding-right: 10px;
padding-bottom: 10px;
}
#news_COL1 {
float: left;
width: 340px;
display: block;
}
#news_COL2 {
margin-left: 380px;
width: 340px;
}
#news_content h5 {
color: #FF6600;
width: 320px;
margin: 0px;
padding: 0px;
}
#news_COL1 p, news_COL2 p {
margin: 0px;
padding: 0px;
}

add this hack for IE, should fix the issue:

* html #news_content{
  height: 1%;
}

be sure to always check the code I post for spelling errors