It looks as though the left column is in place here. The screenshot you posted means you probably entered the code incorrectly because you still have bullets on the list and the code I gave above removed the bullets
You need to clear the floated side column (see faq on floats). You can do it using overflow:hidden (assuming that you don't want visible overflow later on):
border:1px solid #888888;
Don't us the deprecated (in strict doctypes) align attribute as you are using css to handle this and it may conflict.
<div id="l-col" [B]align="left"[/B]>
Don't use breaks to make space as they are not meant for that. If you have paragraphs then use the p element properly:)
e.g. code snippet
..... or to New Zealand, USA or UK. <br />
We have a catalogue ....
It should be:
or to New Zealand, USA or UK. </p>
<p> We have a catalogue ..... </p>
Hope that's of some use