Responsive image and List items - php

Question

I'm developing a header part of a responsive design. Can anyone tell me how to keep same height in both list items total height and responsive image height, responsive image height will be change according to the resolution, what i need to do is according to that height add more list items or change list items bottom margin and height (both should be increase or decrease and add/remove items to keep a clean look.)
Can anyone help me in this matter to solve? (I'm using HTML5, CSS3, Jquery and PHP if needed)
http://jsfiddle.net/ST7xy (This is a demo)
<div class="navigation">
<ul class="list">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
<div class="image">
<img src="http://placehold.it/500x200" width="100%">
</div>

Answer 1

I would recommend floating it all inside a div, with an adjustable height depending on resolution then using percentages on your heights, so making the main image 100% and the list's (4 in your example) 25% each.
JSfiddle
css:
.container {
height: 200px;
}
.navigation{
float: left;
width: 200px;
height: 100%;
}
.list{
padding: 0;
margin: 0;
height: 100%;
}
.list li{
margin:0;
padding:0;
margin-right: 5px;
margin-bottom: 2%;
height: 23.5%;
}
.list li:last-child{
margin-right: 5px;
margin-bottom: 0;
height: 23.5%;
}
.list li a{
display: block;
background: grey;
line-height: 100%;
height: 100%;
}
.image{
float: left;
}

Answer 2

You cannot get this to work with css alone. You need to use jquery.
Use
var navHeight = $(".navigation").height();
to get the height of the navigation div. And on any change you need to assign that height to div image like :
$(".image").height(navHeight);
So basically :
$(window).resize(function(){
var navHeight = $(".navigation").height();
$(".image").height(navHeight);
});
$(window).resize(); //on page load
Jus giving an insight and you can build on from here..:)

Answer 3

This is what you want and what you need
Working Solution
Jquery
$(document).ready(function () {
var leftHeight = $('.image').height() - 5;
$('.navigation').css({
'height': leftHeight
});
var rightHeight = $('.navigation').height();
});
CSS
.navigation {
float: left;
width: 200px;
}
.list {
padding: 0;
margin: 0;
background-color:#000;
height:inherit;
}
.list li {
padding:0;
height:25%;
margin-right: 5px;
}
.list li a {
display: block;
background: gray;
height:90%;
}
.image {
padding: 0;
margin: 0;
float: left;
}
As you can see the query is simple ad straight forward. I assign the height of the image div to the navigation div.
In the CSS i have used percentages to match the parent ul. So incase you using 4/6/8 list item's you will have to change this percentage accordingly.
Enjoy!