I have a two column layout with a parent div (container) and the two column divs inside. The left column is floated left with a width and the right column has a margin to the left which is the width of the left floated div + 20px. I want this second column to take up the rest of the width provided by the container.
The problem is that floated content placed in the second column and then cleared lower down appears under the first column, a white space appears that's the same height as the floated column. So in the screen shot the < p > tags would be floated left with the second clearing the first as an example.
How can this be fixed? I've included a link to an image as reference. I've used this technique before without problems so I'm not sure what's gone wrong.
Image of problem including CSS in use
Thanks for looking
