Remove a linebreak after IMG

Question

I have an img element set next to a div. I have tried a couple of different approaches to remove the linebreak that is occurring between the two but have not had any success. Any input would be greatly appreciated!

CSS

#newsMainBody
{
margin-right: auto;
margin-left: auto;
background:#61bc49;
width: 750px;
height: 900px;
font-family:"sans-serif";
text-align:left;
-moz-border-radius: 10px;/*mozilla*/
z-index: 1;
white-space: nowrap;
}

#starOfMonth
{
background: #ffff99;
width: 275px;
height: 300px;
text-align: center;
font-family:"sans-serif";
white-space: normal;
}

HTML

<div id="newsMainBody">
   <img src="img/farm.jpg" alt="Farm photo" />
   <div id="starOfMonth">
      <br />
      <font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br />
      <font style="font-size:small;">"We're Growing Great Kids"</font><br />
      <img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br />
      Our Star Of The Week!
    </div>
 </div>

Answer 1

Add:

#newsMainBody img {
float: left;
}

#startOfMonth {
float: right;
}

and remove the first <br /> after <div id="starOfMonth">, it's useless (use padding-top in css instead if you need some space)