Im trying to create a news page which I need in 2 colums.

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

Can anyone help please?

Here is a view of how it looks in IE6: http://www.outer-edge.com.au/develop...images/IE6.gif

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

HTML

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

<div id="news_COL1">

<img src="http://www.webmaster-talk.com/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="http://www.webmaster-talk.com/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;
}

You have to be mindful of IE's busted box model.

Take the width off your #news_content h5, then add "display: inline"

#news_COL1 {
float: left;
width: 340px;
}

#news_COL2 {
width: 340px;
margin-left: 370px;

}

#news_content h5 {
color: #FF6600;
/*width: 320px;*/
font-size: 12px;
margin: 0px;
padding: 0px;
display: inline;

You do NOT need 'display: block' on #new_COL1, a div IS a block-level element.

You're a life saver!!

Thanks so much, you've been so helpful on many occasions.

You're welcome

Excellent