<div id="maincol" >
<div style="float: right; width: 100px; background-color: pink;">
Text in right column<br/>
Text in right column
</div>
<div> <!--left inner div-->
Welcome to feed me<p>Let us help you find your dream cuisine... <p>Please enter your postcode below to get a list of all available cuisines in your area! Please enter your postcode below to get a list of all available cuisines in your area!<p><p><p><img src="images/postcode.gif" /><p><input type="text" name="postcode" /><input name="sub" type="submit" value="feed me" /></div>
</div> <!--end of #maincol-->
Put two divs inside #maincol like the above. The right one has float: right; width: 100px; the left one has no width or float. If it is coded after the right div it will just float up into the space available on the left.
I repeated the text in the left div to demonstrate that if you have a long paragraph it will flow below the right div if the right one does not have much in it or has a shorter height. To stop this if you don't want it to flow under the right div, make sure the right div always has more content than the left one or give it a fixed height that will be enough to stop the left one flowing under it.
If you could give a width to the left inner div, you could give it a margin-right: 100px to keep it clear of the right div but unfortunately you cannot give it a width if you want it to be flexible in width and margin-right does not work if the div has no width. You've chosen a difficult example.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.