2-Column layout is making problems

I got two problems with positioning elements. I wan

I have a class called "orderlightBG", which countains 1 headline-id, which is called #paymentHeader and an other class, which is called div.hiO3payment.

I want to positin the headline first and after the Headline, all payment methods in two rows. So i tried to use column, but i cant only let the 4 elemnts be in the column. Is it possible to do this with colomn or do i need something else?

And me second question is also referred to colomn. I let a popup jump out of every payment method, when i hover over it. This is a div-container which is in the div-container, which contains the column-attribute. But it doesn't goes automatically to colomn 2. What is the reason for this and is there a solution to bring the popup to colomn 2?

}

div.hiO3Payment {
 
}
 
form#payment .orderlightBG {
-webkit-column-count:2; /* Chrome, Safari, Opera */
-moz-column-count:2; /* Firefox */
column-count:2;
 
.popupTrigger + span.popup{
	width: 153px;
	margin-left: 20px;
	font-size: 12px;
	line-height: 120%;
}

The code isn't fully, because I don't want to make it to complicated, but i would also post the full code, if this would help.

Thanks for your help in advance!