How do I let a div fill in the blank space - html

Question

I have this page with several images. On the left is a bigger image that covers 32% of the width of the page and on the right there is a 6 image grid that covers the other 68% of thw width.
I have the images resize as the page width increases or decreases and that works beautifully.
At the bottom I have a navigation menu. The problem I have is with the navigation menu.
When resizing the page the images correctly respond but that leaves a white space between the menu and the images. I want to fill that gap. I tried to lett the menu fill in that blank space but couldn't get that figured out. then I suddenly realised that that would look terrible on phone's and such as the images would become terribly small and the menu would end up on over half of the page.
So my question is: what is a good way to fix my problem? Do I need to take a whole different approach?
EDIT: I'm familiar with the concept of responsive and know there are frameworks, but the frameworks i know of only offer a Grid layout and this site has to cover the entire screen on every resolution (per client request) So if you know how to do that with something like Bootstrap let me know.
If this is not possible at all, also please let me know so I can tell the client.
Heres a quick Fiddle (Image resolutions are accurate resolutions)
HTML
<div class="content">
<div class="left">
<div id="big-block">
<img id="red-tiger" src="img/tijger2.png" alt="Tijger"/>
</div>
</div>
<div class="right">
<img class="block" id="red-cat" src="img/plaatje1.png" alt="Rode Kat"/>
<img class="block" id="wild-dog" src="img/plaatje2.png" alt="Wilde Hond"/>
<img class="block" id="red-panda" src="img/plaatje3.png" alt="Rode Panda"/>
<img class="block" id="white-tiger" src="img/plaatje4.png" alt="Siverische Tijger"/>
<img class="block" id="puppys" src="img/plaatje5.png" alt="Puppy's"/>
<img class="block" id="grey-cat" src="img/plaatje6.png" alt="Grijze Kat"/>
</div>
</div>
<div class="footer">
<ul class="menu">
<li>HOME</li>
<li>EIGEN ONTWERP</li>
<li>GALLERIJ</li>
<li>WEBSHOP</li>
<li>CONTACT</li>
</ul>
</div>
CSS
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
}
.content {
width: 100%;
padding-bottom: 45%;
}
/* block width */
.left, .right {
float: left;
}
.left {
width: 32%;
}
.right {
width: 68%;
}
/* smaller blocks */
.block {
width: 33.33%;
float: left;
}
/* footer */
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding-bottom: 4.6%;
background-color: black;
}
/* menu */
.footer > ul {
list-style-type: none;
margin: 0;
}
.footer > ul > li {
width: 20%;
float: left;
line-height: 30px;
text-align: center;
}
.footer > ul > li > a {
font-family:'Fjalla One', sans-serif;
color: white;
text-decoration: none;
}
.footer > ul > li > a:hover {
color: orange;
}

Answer 1

As we've discussed, using a responsive framework is the way to go. I would suggest bootstrap.
problem is all the frameworks I know of offer Grid layout only and
this site should be screen wide on any screen.
Again, as I said in my comment, thats not actually right. Bootstrap has a class container-fluid that will make the container span the full width. see - http://getbootstrap.com/css/#grid-example-fluid.
With regards to the sticky footer, this is possible too, see - http://getbootstrap.com/examples/sticky-footer/

Answer 2

You have to use responsive layouts for it.. You have to use frameworks to achieve it easily... I suggest Bootstrap...

Answer 3

I have tried changing your fiddle. The images fill the gap but they do not look good. Here is the link http://jsfiddle.net/0an15t5y/2/
Changed a few css.
.content {
width: 100%;
height: 80%;
}
/* block width */
.left, .right {
float: left;
}
.left {
width: 32%;
}
.right {
width: 68%;
height: 100%;
}
/* smaller blocks */
.block {
width: 33.33%;
float: left;
height: 50%;
}
/* footer */
.footer {
position: absolute;
left: 0;
height: 20%;
width: 100%;
background-color: black;
}