Question

I was looking at the canvas app The Eatery has created and I noticed how the layout is fluid. Specifically the #main column’s left margin enlarges as the page is widened. I looked through the CSS with Chrome’s inspector and I can’t see what property is set that starts with a default distance from the left edge, but that grows with the length of the page. There is an inline style, but I don’t understand how it’s relative to the width of the window.

I can duplicate it using something like left:5%; but I don’t think that’s what’s happening in particular on this page. Because, watching it in the inspector, it’s pixel-based sizing and using a percent keeps the percents in the CSS. Any idea what’s happening on that page that I can’t seem to duplicate?

I’ve looked through a ton of the fixed-width questions on SO, but none of the answers seem to do it.

Answer 1

It’s made by javascript onresize event.

In this particular the code is:

var a=$(window).width()
b=184;
$("#main").css("left", Math.max( (a-500-600)/2, 20) ), 
    $(window).height() < 800 ?
    ($("#hand, .hand-image").addClass("smaller") , b=96 ) :
    $("#hand, .hand-image" ).removeClass( "smaller" ), $("#app-store").css("right", Math.min(a-850, b ) );

— remove from the source code —

The idea is simple, take the width of document or window and move the div to a position based on the size. In the case, the left value is the higher between (a-500-600)/2 and 20 (px).