Div-Box-Positioning-with-Absolute-and-Relative-Positioning

padding0, margin:0 20px 0 84%, abs positioning but no left or top, 1ST DIV IN CODE

padding0, margin:10px 0 0 42%, abs positioning but no left or top, 2ND DIV IN CODE

padding0, margin:10px 0 0 0, no positioning, 3RD DIV IN CODE

padding0, margin0, no positioning, 4TH DIV IN CODE

padding0, margin:10px 0 0 10px, no positioning, 5TH DIV IN CODE

padding:10px 0 0 10px, margin0, no positioning, 6TH DIV IN CODE

padding:10px 0 0 10px, margin0, abs positioning with left and top, 7TH DIV IN CODE

padding:30px, margin0, abs positioning with left and top, 8TH DIV IN CODE

360wide which is what the div boxes below should be INCLUDING MARGINS

IE WITHOUT FIX:
one div only, div is 250 width, margin25, border10, padding20, but with padding and borders the total pixel width 'should' be 310 but it's 250

IE fix: outer div is 310width, margin25; inner div is border10, padding20; correct total pixel width of 310 is achieved via outer div with width and margin and inner div with border and padding only

big div, position:relative, height180px, no margin or padding, all 4 divs nest in this div;

top25%,left0%
abs position 1st
padding10px

top40%, left25%
abs position 2nd
padding10px

top50%,left50%
abs position 3rd
padding10px

top40%, left75%
abs position 4th
padding10px

all the 4 box's absolute positioned measurements are relative to the top left of big div