Adding an image column to the twenty twelve theme

I’m converting an existing site to WordPress using a child of the Twenty Twelve theme. Some pages need to share a custom menu sidebar on the left side of the page, I’ve achieved this using a custom template – no problems.
We need a subset of these pages to have a column on the right side of the page to hold one or two images. I’ve done this by having two floated <div>s in the page content, the first one holds the text for the page and floats to the left and the other one to hold the images goes to the right. I’ve set the width of these <div>s to 50% of the page width less the custom menu width. This seems to work well and it responds well as the window width is reduced.
The problem is that the double line that normally appears between the content and the footer actually appears just below the top of the two <div>s described above. When the window width is reduced to the minimum this double line goes to the bottom correctly.
The double line seems to be drawn by the class in the themes style.css that begins

.site-content article {
	border-bottom: 4px double #ededed;
...

as proved by setting the border-bottom to 0 in the child’s style.css when the double line disappears.
The problem seems to be associated with the height of the <article> block, which is small, and the floating of the <div>s causing them to appear below the <article>.
How do I overcome this problem or is there a better way to achieve the effect I need.
I am inexperienced using PHP, not much better with CSS and fumbling my way through the process of conversion and will appreciate any help.