Positioning selectors with correct dimensions that scale on different screen sizes

[aliciajackal]

Trying to build a page layout using html and css, the page contains jQuery UI selector elements

• Looking to have \[code\]<div id="content"> <img id="grid" src="http://placehold.it/350x250"/></div>\[/code\]

placed in the center of the screen, equal distance from left, right, top and bottom window edges.

• And a left hand menu, containing 8 images, 4x2 rowsxcols layout\[code\]<div id="menu" style="width:150px;float:left;"> <b>Stock images</b><br> <ol id="selectable"> <li id="house.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="gherkin.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="water.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="tree.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="me.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="hey.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="wutang.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> <li id="test.png" class="ui-state-default"><img src="http://placehold.it/50x40"/></li> </ol></div><div id="content" style="float:left;"> <img id="grid" src="http://placehold.it/350x250"/></div>\[/code\]

For some reason I cannot adjust the dimensions of the \[code\]<div id="menu"\[/code\] element correctly
Selectable elements should not be obstructed by \[code\]grid\[/code\] element.
Aim is to use percentages when possible instead of hardcoded values so page will render correctly on different sized devices.
The header and footer divs position fine.
Appreciate any help with this!Heres a jsfiddle of the current layout ..http://jsfiddle.net/bobbyrne01/TdNXD/5/