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: 5590


<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;
}