CSS to manipulate 6 div in a 3 column layout

I have a layout with 6 div, to a 360 grid layout, each have different lengths with same width. First row of 3 div are aligned at top, Second row of div are also aligned along their tops, however not the result I want.

As the middle div in the top middle has less content (less length then top left and right) I would like the lower middle div to move up the column to reduce the space between the two middle div’s.

Current code, based on 12 column 960:

html {
	background: url(../img/bg.jpg) repeat;
}

body {
	color: #0194a6;
	font-family: cinnamon_cakeregular, Ubuntu, helvetica;
	text-align: center;
}

/* GENERAL STYLES */

a {
	color: white;
}

h4, .desc {
	color: #000000;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
	padding-top: 10px;
}

#desc li {
    list-style-type: none;
}

#container1 {
	position: relative;
	padding-top: 15px;
}
<!DOCTYPE html>

<html long="en">
<head>
	<meta http-equiv-"Content-type" content="text/html; charset=utf-8">
	<title>Marita Jordaan Photography ~ Pricing</title>
	<link rel="stylesheet" href="css/reset.css" type="text/css" />
	<link rel="stylesheet" href="css/960.css" type="text/css" />
	<link rel="stylesheet" href="css/text.css" type="text/css" />
	<link rel="stylesheet" href="css/price.css" type="text/css" />
	
</head>
<body>
	<div id="container1" class="container_12"> <!--start container-->
		<div id="upper"><!--start upper-->
			<div class="grid_4"><!--start col1-->
			<img src="img/newborn.jpg" alt="Newborn" />
				<h4> Basic - R1 600 </h4>
			
			<ul id="desc">
				<li> Babies 0 - 3 months old </li>
				<li> Baby only - no parents and/or siblings </li>
				<li> 2 - 3,5 hour shoot </li>
				<li> 20 - 30 high resolution images on disk </li>
				<li> In studio </li>
				<li> (Twins R1 900) </li>
			</ul>
			
				<h4> Deluxe - R1 900 </h4>
				
			<ul id="desc">
				<li> Babies 0 - 3 months old </li>
				<li> Include parents with up to 2 siblings </li>
				<li> 3,5 - 4,5 hour shoot </li>
				<li> 30 - 40 high resolution images on disk </li>
				<li> In studio / On location </li>
				<li> (Twins R2 200) </li>
			</ul>
			</div><!--end col1-->
			
			<div class="grid_4"><!--start col2-->
				<img src="img/1stcake.jpg" alt="1st Birthday Cake Smash" />
			
				<h4> Basic - R1 300 </h4>
			
			<ul id="desc">
				<li> 1 year only </li>
				<li> 1 - 1,5 hour shoot </li>
				<li> 15 - 20 high resolution images on disk </li>
				<li> In studio </li>
				<li> (Parents to supply cake
					 all other props will be supplied) </li>
			</ul>
			</div><!--end col2-->
		
			<div class="grid_4"><!--start col3-->
			<img src="img/fam.jpg" alt="Family" />
			
				<h4> Basic - R1 500 </h4>
			
			<ul id="desc">
				<li> 1 - 1,5 hour shoot </li>
				<li> Family of 3 - 4 </li>
				<li> (R250 per extra family member) </li>
				<li> 20 - 30 high resolution images on disk </li>
				<li> On location /li>
			</ul>
			
				<h4> Deluxe - R1 800 </h4>
			
			<ul id="desc">
				<li> 1,5 - 2 hour shoot </li>
				<li> Family of up to 8 members </li>
				<li> 30 - 40 high resolution images on disk </li>
				<li> On location </li>
			</ul>
			</div><!--end col3-->
		</div><!--end upper-->
	 </div><!--end container1-->
	
	<div id="container2" class="container_12"> <!--start container2-->
		<div id="lower"><!--start lower-->
			<div class="grid_4"><!--start lcol1-->
				<img src="img/baby.jpg" alt="Baby" />
			
				<h4> Basic - R1 300 </h4>
			
			<ul id="desc">
				<li> Babies 3 -12 months old </li>
				<li> 1 - 2 Babies ~ no parents </li>
				<li> 1 - 2 hour shoot </li>
				<li> 20 - 30 high resolution images on disk </li>
				<li> In studio / On location </li>
			</ul>
			</div><!--end lcol1-->
		
			<div class="grid_4"><!--start lcol2-->
			<img src="img/preg.jpg" alt="Pregnancy" />
			
				<h4>Basic - R1 100</h4>
			
			<ul id="desc">
				<li> 45 min - 1 hour shoot </li>
				<li> Parents only </li>
				<li> 15 - 20 high resolution images on disk </li>
				<li> In studio / On location </li>
			</ul>
			
				<h4> Deluxe - R1 350 </h4>
			
			<ul id="desc">
				<li> 1,5 - 2 hour shoot </li>
				<li> Parents with up to 2 siblings </li>
				<li> 20 - 30 high resolution images on disk </li>
				<li> On location </li>
			</ul>
			</div><!--end lcol2-->
		
			<div class="grid_4"><!--start lcol3-->
			<img src="img/other.jpg" alt="Other" />
				
				<h4> OTHER </h4>
			
				<ul id="desc">
					<p> This includes, but not limited to
						 parties and events.
						 Customised around your requirements.
						 Quote supplied on request </p>
				</ul>
				
					<h4> EXTRAS </h4>
			
				<ul id="desc">
					<li> High quality printed photobooks </li>
					<li> Any size prints </li>
					<li> Canvas </li>
					<p> Contact me if you would like to include
						 any of these products into your package </p>
				</ul>
				</div><!--end lcol3-->
			</div><!--end lower-->
    </div> <!-- end container2-->
	
   	<div id="divider" class="container_12">
			<div class="grid_12"><!--start dcol1-->
			<img src="img/heart-div.png" alt_"Heart Divider" />
			
			</div><!--end fcol1-->
		</div>
   	 <div id="footer" class="container_12">
			<div class="grid_12"><!--start fcol1-->
			<img src="img/bot_pastel.png" alt="Bottom Border" />
			
			</div><!--end fcol1-->
		</div>
</body>
</html>


Source: css3

Leave a Reply