I apologize for the delay in getting back to you. I was out of town all last week and am just getting back to work and caught up on all my emails.

Yeah, this will take some major modification. Basically, to start you'll want to add something like this right within the container div:


Note: You'll also have to modify the col_# classes for divs now in that main area (within the #wrapper div).

Brilliant thanks for this how would I get a break point on the right hand div when it goes to mobile phone size. At the moment the two columns in "col_8 omega" squash together (see attachment).

Is there a way of making them break apart into one col when it goes onto a mobile screen.

Hmmm...can you send me a link to the site so I can take a look?

Hi - sorry to be a while coming back to you have been putting it on my test server...Here is the link
http://bmc-client.co.uk/kaliyoga2/yoga-detox-retreats-europe-spain/...
as you can see when this goes to iPhone portrait the two columns under the nav bar don't break into one col as I would like but stay as two cols shrinking as they go...any ideas how to make this break point happen?

Sooooo sorry for the delay in getting back to you - I just found this buried in my email.
Easy fix...Instead of adding id="leftColinner" to the left column add class="col_5 alpha". Instead of adding id="rightColinner" to the right column add class="col_3 omega".

Hi - thanks for that it works beautifully - could you explain the logic of that. OK I get that they are in an 8 col column. So it needs to add up to 8 the cols inside but what the significance of the alpha an omega...I didn't realise you could have cols within cols so this is quite a relelation for me...Thanks

The first column in a row has to have the "alpha" (which means first) class added to it to remove the left margin. The last column has to have the "omega" (which means last) class added to it to remove the right margin.

Thanks so much for this Chris liking the sound of that...I'm getting the logic.

You're welcome!