CSS - variable width divs for image with caption

HTML

<div class="section group">
	<div class="col span_2_of_3">
	This is column 1
	</div>
	<div class="col span_2_of_3">
	This is column 2
	</div>
</div>

CSS

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	/*margin: 1% 0 1% 1%;*/
	border-style:solid;
	border-width:1px;
   /* min-width: 200px;*/
}
.col:first-child { margin-left: 0; }

/*  GRID OF THREE  */
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 49%;
}
.span_1_of_3 {
	width: 32.2%;
}

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}