hi nicsinghs,
as far as my knowledge goes :
be aware that this white space will be different in every screen you look.
so maybe you can look in different devices and then decide how would you like to change the layout and sizes of the content.
if you don't want to change the layout you can place a background tiled image and it will fill up all the empty space. (or other design based approaches).
also, if you want all the content of the page to be centered, then you could place this code in the < body > of your pages code ('add/edit custom code' button). i got it a few years ago from saba vidyo (i hope this is how you put code in this forum +i hope this code still works)
<script>!window.jQuery && document.write('<script indent src="js/jquery-1.5.2.min.js"> <\/script>')</script>
<script type="text/javascript">
var l_sides = new Array();
var r_sides = new Array();
var win_width = $( window ).width();
var body_width = $( "body" ).width();
var objs_with_ids = $('body [id]');
objs_with_ids.each(function() { //Get elements that have an id=
l_sides.push($(this).offset().left); //add left's to array
r_sides.push($(this).offset().left + $(this).width()); //add right's to array
});
var min_left = l_sides[0];
var max_right = r_sides[0];
for (var i=1, len=l_sides.length; i < len; i++) {
if(l_sides[i] < min_left) {min_left = l_sides[i]}
}
for (i=1, len=r_sides.length; i < len; i++) {
if(r_sides[i] > max_right) {max_right = r_sides[i]}
}
var objs_grp_width = max_right - min_left;
var dist_to_move = win_width/2 - objs_grp_width/2;
//alert(dist_to_move);
objs_with_ids.each(function() { //Get elements that have an id=
$(this).css('left', parseInt($(this).css('left')) + dist_to_move);
});
</script>
but then every time you are editing the page, you have to take all the content to the left side (otherwise the centering will not work properly) (ctrl+a selects all the content of the page ).
i myself love the fact that hotglue is absolute positioning, it makes so many thing possible and its a powerful and beautiful feature