css test
box model
Showing how padding and margin is effected on boxes when width is set to 100%;
div #nostyle
div #padding
padding and border stays within 100 %
div #width100
this will overlap
pushes out because width set
padding and border added to 100%
div #width100pad
this will overlap
pushes out because width set
padding and border added to 100%
div #margin
margin and border stays within 100 %
div #width100margin
this will overlap
pushes out because width set
padding and border added to 100%
div #width_auto_margin
class set to 100%
id set to auto, resets so margin stays within parent.
div #width_auto_padding
class set to 100%
id set to auto, resets so padding stays within parent.
Absolute positioning: box width
relative box
test test test test
relative box
test test test test test test test test test test test test test test test test test test test
relative box
this content has padding and margin test test test test test test test test test test test test test
Note: absolute boxes in a relative div will not expand the relative div box.
this will cause overlapping content unless you do overflow auto:
not all browsers will show the scroll for the absolute positioned elements that may be hidden.
relative box
this content has padding and margin test test test test test test test test test test test test test
Note: overflow auto: IE8 shows scrollbars, FF 3.0.11 does NOT
longggg box
wrapping boxes ignore the margin and padding and use the line-height; - - - test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
Note: wrapping boxes ignore the margin and padding and use the line-height;
with line height - - - - test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
Note: with line height set to margin + padding + border + font-size