How to have a div#box outside container?

[bbilal]

Hello Everyone,

I am trying to create 2 boxes outside the wrapper on the left side? Can anyone guide me how to achieve this?

Maybe this picture will help to understand:

<div class="container">
	<div id="header">FULL WIDTH HEADER</div>
	<div class="left-column" >left column</div>
	<div class="middle-column" >middle column</div>
	<div class="right-column" >right column</div>
		
</div>
<div class="clear"></div><!-- used to clear the floats -->
<div id="footer">FULL WIDTH FOOTER</div>

#header,#footer { width: 100%; margin: auto; background-color:blue; height:50px; }
	.container
	{ 
	width:100%; 
	height:700px;  
	background-color:lightblue;
	margin:0 auto;
	}
	.left-column
	{
		width:15%;
		height:700px;  
		float:left;
		background-color:red;
	}
	.middle-column
	{
		width:65%;
		height:700px;  
		float:left;
		background-color:pink;
	}
	.right-column
	{
		width:20%;
		height:700px;  
		float:left;
		background-color:yellow;
	}
	.clear
	{
		clear:both;
	}