Made a pigs ear of the css div classes
Well when designing this site i thought it would be clever to lay everything out in either a left-side column or a right-side column. I have a transparent header on the left and another transparent bit on the right, then after that both sides have a white background. Now having spent a small while on it I no-longer like the way it looks when one side finishes and the other side continues down to the bottom of the page like so:

![enter image description here][1]

Unfortunately because of the way i've laid out my classes so far I can't see anyway to "fix" this. 

It's a bit cheeky but i wondered if anyone out there with experience could see a way round this? or has any sage advice on the matter?

My css (simplified, I edited out any further div classes you didn't need to know about):

    
    
    * {margin: 0; padding:0;}
    body
    {
    font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
    color: Grey;
    background-image: url('Images/background_gradient.png');
    background-repeat:repeat-x;
    background-color: #d4ffaa;
    margin: 0 auto;
    height: auto;
    max-width: 90%; 
    }
    
    h2
    { 
    margin: 0.6em 0;
    color: Grey;
    border-bottom: 2px solid #d4ffaa; 
    font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
    }
    
    #central_container
    {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    float: left;
    }
    #leftside_container
    {
    float: left;
    width: 67.1%; 
    clear: left;
    }
    	#header_container
    	{
    	width: 100%;
    	max-height: 300px;
    	height: 15em;
    	}
    		#header_title
    		{
    		width: 100%;
    		height: 80%;
    		}
    			#header_title h1{ font-size: 4em; color: Ivory;}
    			
    		#navbar_container
    		{
    		width: 100%;
    		height: 20%;
    		}
    			//edited
    
    		#currentpage_container
    		{
    		background-color: Ivory;
    		width: 100%;
    		height: 20%;
    		}
    			#currentpage_content
    			{
    			font-family: 'Trebuchet Ms';
    			padding: 1em 3em;
    			}
    			//edited

    
    #rightside_container
    {
    float: right;
    width: 33%;
    }
    	#register_container
    	{
    	width: 100%;
    	max-height: 300px;
    	height: 15em;
    	}
    		//edited
    	
    	#contact_container
    	{
    	background-color: Ivory;
    	width: 100%;
    	}
    	#contacts_content{ padding: 1em 3em; }
    		//edited
    		
    	#logos_content
    	{
    	padding: 0.5em 3em;
    	height: 150px;
    	}
    		//edited

    	#social_content
    	{
    	padding: 1em 3em;
    	}
    	

And my html in case it helps (bare in mind, not edited for relevence):

    <!DOCTYPE HTML>
    <html lang="en">
    
    <head>
    	<title>Verge Green IT</title>
    	<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	
    	<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    	<script type="text/javascript">stLight.options({publisher: "ur-ea3b6db-3e14-19ab-cd0a-b82a99b4706"}); </script>
    
    	{% load static %}
    	<script type="text/javascript" src="{% static "JS/CycleLogos.js" %}" defer="defer"></script>
    	<link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />
    </head>
    
    <body> 
    <div id="central_container">
    
    <!--Left-side Current-page Content-->
    <div id="leftside_container">
    
    	<!--Header-->
    	<div id="header_container">
    	
    		<div id="header_title">
    		<h1>Green IT at The Verge</h1>
    		</div>
    	
    		<!--Navbar-->
    		<div id="navbar_container"> 
    		<div class="navbar_links">
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="About">About</a></li>
    			<li><a href="Speakers">Speakers</a></li>
    			<li><a href="Exhibitors">Exhibitors</a></li>
    			<li><a href="Agenda">Agenda</a></li>
    			<li><a href="Location">Location</a></li>
    		</ul>
    		</div>
    		</div>
    	
    	
    	</div>
    	<!--Current Page Contents-->
    	<div id="currentpage_container">
    		<div id="currentpage_content">
    		<h2>Currentpage Content</h2>
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    		<h2>I'm another header</h2>
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididus nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
    		"Lorem ipsum dolor sit amet, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    		</div>
    	</div>
    	
    </div>
    	
    <!--Right-side Every-page Content-->
    <div id="rightside_container">
    	<div id="register_container">
    		<div class="bubble"> <p>Register now > For free entry to the expo</p></div>
    	</div>
    	<div id="contact_container">
    		<div id="contacts_content">
    		<h2>Contact</h2>
    		<p class="text">
    		For more information on the event or if your interested in Speaking / Exhibiting don't hesitate to get in touch:  </p>
    		<p class="contactNum"> 02082394073 </p>
    		<p class="contactEmail"> info@vergegreenit.com </p>
    		</div>
    		
    		<div id="logos_content">
    		<h2>Associates</h2>
    		<div id="img0" class="logo">
    		<img src="{% static "CSS/Images/phone_icon.gif" %}"/>
    		</div>
    		<div id="img1" class="logo2">
    		<img src="{% static "CSS/Images/email_icon.gif" %}"/>
    		</div>
    		<div id="img2" class="logo">
    		<img src="{% static "CSS/Images/phone_icon2.gif" %}"/>
    		</div>
    		<div id="img3" class="logo2">
    		<img src="{% static "CSS/Images/email_icon2.gif" %}"/>
    		</div>
    		</div>
    		
    		<div id="social_content">
    		<h2>Share Event</h2>
    		<span class='st_linkedin_large' displayText='LinkedIn'></span>
    		<span class='st_twitter_large' displayText='Tweet'></span>
    		<span class='st_facebook_large' displayText='Facebook'></span>
    		</div>
    	</div>
    </div>
    	
    	
    </div> 
    </body>
    
    </html>

  [1]: http://i.stack.imgur.com/5wtki.png

Made a pigs ear of the css div classes
===

Well when designing this site i thought it would be clever to lay everything out in either a left-side column or a right-side column. I have a transparent header on the left and another transparent bit on the right, then after that both sides have a white background. Now having spent a small while on it I no-longer like the way it looks when one side finishes and the other side continues down to the bottom of the page like so:

![enter image description here][1]

Unfortunately because of the way i've laid out my classes so far I can't see anyway to "fix" this. 

It's a bit cheeky but i wondered if anyone out there with experience could see a way round this? or has any sage advice on the matter?

My css (simplified, I edited out any further div classes you didn't need to know about):

    
    
    * {margin: 0; padding:0;}
    body
    {
    font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
    color: Grey;
    background-image: url('Images/background_gradient.png');
    background-repeat:repeat-x;
    background-color: #d4ffaa;
    margin: 0 auto;
    height: auto;
    max-width: 90%; 
    }
    
    h2
    { 
    margin: 0.6em 0;
    color: Grey;
    border-bottom: 2px solid #d4ffaa; 
    font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
    }
    
    #central_container
    {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    float: left;
    }
    #leftside_container
    {
    float: left;
    width: 67.1%; 
    clear: left;
    }
    	#header_container
    	{
    	width: 100%;
    	max-height: 300px;
    	height: 15em;
    	}
    		#header_title
    		{
    		width: 100%;
    		height: 80%;
    		}
    			#header_title h1{ font-size: 4em; color: Ivory;}
    			
    		#navbar_container
    		{
    		width: 100%;
    		height: 20%;
    		}
    			//edited
    
    		#currentpage_container
    		{
    		background-color: Ivory;
    		width: 100%;
    		height: 20%;
    		}
    			#currentpage_content
    			{
    			font-family: 'Trebuchet Ms';
    			padding: 1em 3em;
    			}
    			//edited

    
    #rightside_container
    {
    float: right;
    width: 33%;
    }
    	#register_container
    	{
    	width: 100%;
    	max-height: 300px;
    	height: 15em;
    	}
    		//edited
    	
    	#contact_container
    	{
    	background-color: Ivory;
    	width: 100%;
    	}
    	#contacts_content{ padding: 1em 3em; }
    		//edited
    		
    	#logos_content
    	{
    	padding: 0.5em 3em;
    	height: 150px;
    	}
    		//edited

    	#social_content
    	{
    	padding: 1em 3em;
    	}
    	

And my html in case it helps (bare in mind, not edited for relevence):

    <!DOCTYPE HTML>
    <html lang="en">
    
    <head>
    	<title>Verge Green IT</title>
    	<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	
    	<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    	<script type="text/javascript">stLight.options({publisher: "ur-ea3b6db-3e14-19ab-cd0a-b82a99b4706"}); </script>
    
    	{% load static %}
    	<script type="text/javascript" src="{% static "JS/CycleLogos.js" %}" defer="defer"></script>
    	<link rel="stylesheet" href="{% static "CSS/base.css" %}" type="text/css" />
    </head>
    
    <body> 
    <div id="central_container">
    
    <!--Left-side Current-page Content-->
    <div id="leftside_container">
    
    	<!--Header-->
    	<div id="header_container">
    	
    		<div id="header_title">
    		<h1>Green IT at The Verge</h1>
    		</div>
    	
    		<!--Navbar-->
    		<div id="navbar_container"> 
    		<div class="navbar_links">
    		<ul>
    			<li><a href="">Home</a></li>
    			<li><a href="About">About</a></li>
    			<li><a href="Speakers">Speakers</a></li>
    			<li><a href="Exhibitors">Exhibitors</a></li>
    			<li><a href="Agenda">Agenda</a></li>
    			<li><a href="Location">Location</a></li>
    		</ul>
    		</div>
    		</div>
    	
    	
    	</div>
    	<!--Current Page Contents-->
    	<div id="currentpage_container">
    		<div id="currentpage_content">
    		<h2>Currentpage Content</h2>
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    		<h2>I'm another header</h2>
    		<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididus nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p><p>
    		"Lorem ipsum dolor sit amet, voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
    		</div>
    	</div>
    	
    </div>
    	
    <!--Right-side Every-page Content-->
    <div id="rightside_container">
    	<div id="register_container">
    		<div class="bubble"> <p>Register now > For free entry to the expo</p></div>
    	</div>
    	<div id="contact_container">
    		<div id="contacts_content">
    		<h2>Contact</h2>
    		<p class="text">
    		For more information on the event or if your interested in Speaking / Exhibiting don't hesitate to get in touch:  </p>
    		<p class="contactNum"> 02082394073 </p>
    		<p class="contactEmail"> info@vergegreenit.com </p>
    		</div>
    		
    		<div id="logos_content">
    		<h2>Associates</h2>
    		<div id="img0" class="logo">
    		<img src="{% static "CSS/Images/phone_icon.gif" %}"/>
    		</div>
    		<div id="img1" class="logo2">
    		<img src="{% static "CSS/Images/email_icon.gif" %}"/>
    		</div>
    		<div id="img2" class="logo">
    		<img src="{% static "CSS/Images/phone_icon2.gif" %}"/>
    		</div>
    		<div id="img3" class="logo2">
    		<img src="{% static "CSS/Images/email_icon2.gif" %}"/>
    		</div>
    		</div>
    		
    		<div id="social_content">
    		<h2>Share Event</h2>
    		<span class='st_linkedin_large' displayText='LinkedIn'></span>
    		<span class='st_twitter_large' displayText='Tweet'></span>
    		<span class='st_facebook_large' displayText='Facebook'></span>
    		</div>
    	</div>
    </div>
    	
    	
    </div> 
    </body>
    
    </html>

  [1]: http://i.stack.imgur.com/5wtki.png
