I wanna cry, i had been writing a beautiful comment with examples, explanations, divagations, and when i was done i hit ctrl+R out of habit from developing.

I really wanna cry... Please implement a cookie based autosave for comment forms :'(

Briefing of my hardworked comment that will never be read: -----------------------------------

I know about the px thing.

Fluid interfaces and traditional box model are wrong because padding and border mess things up You cant substract % - px, and % in width and height is calculated without taking in account border and padding.

I gave an example (wont rewrite it again)

I gave a few solutions: * extra markup inside the boxes with % ( ex. div.absolute>div.padding20>content ) Ugly and unsemantic, but usable * using positioning top/bottom and left/right for defining widths and heights This only works if you define boths of properties, anyway else if you specify width/height with padding/border it screws you * use new CSS3 box-sizing property Not compatible in all browsers, but maybe the best option thinking to future

Links to ilustrate: Traditional box model http://www.w3schools.com/css/css_boxmodel.asp Optional box models http://www.w3.org/TR/css3-ui/#box-sizing

I also said that a webapp like google calendar would benefit from this things, right now in chrome it gives me 2 scrollbars on the right side, one for the body and another one for the calendar pane.

Uh and heights is crappy because an element only expands to 100% height if parent is 100% height, anyway else it doesnt do shit. This is pain in the ass, redundant and messy between browsers.

Better option is to specify each box coordinates and anchors (and subsequently width and heigth) with position absolute top/left/right/bottom and then define padding without having troubles.

If somebody asks more i will jsfiddle some examples