CSS Layout help please

[Badass]

Hi

Please take a look at this:

http://cms-stu-iis.gre.ac.uk/mj076/index.html

Here is the CSS file:

http://cms-stu-iis.gre.ac.uk/mj076/template.css

I have coloured the div in question. It is yellow. div id="maincol"

I want to split this div into two columns with the right column set to a width of 100px so that the left column will automatically resize when necessary.

Can you point me in the right direction? Ive been trying but its not working...

Thank you.

[Wickham]

<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.