HTML/CSS layout - dynamic width -

i'am quite new in web developement , i'm facing following problem:

i have parent div width , height unknown , i'd divide div 4 parts follows:

      +-------------------------------------------------------------------------+     |+---------------+ +--------------------+ +------------+ +---------------+|     ||div 1          | |div 2               | |div 3       | |div 4          ||     ||width: n px    | |widht: n px         | |width: 50px | |width: n px    ||     |+---------------+ +--------------------+ +------------+ +---------------+|     +-------------------------------------------------------------------------+  

so div1, div2 , div4 need have same width whereas div3 has static width of 50px.

until have achieved using helper containers:

      diva = "position:absolute; width:66.6%"        divb = "position:absolute;left:0px;right:50px"            div1 = "width:50%"            div2 = "width:50%"        div3 = "position:absolute;right:0px;width:50px"     div4 = "width:33.3%;right:0px"  

first of all, solution not completly fit needs since div1, div2 , div4 not have same width. div1/div2 have width of (66.6%-50px)/2 < 33.3% wheras div4 has width of 33.3%

second, width of div3 has defined on 2 places feel bit cumbersome.

so question:

is there way solve usecase pure html/css (without using tables)?

thanks in advance,

greez,

harald

although bit unsupported in older browsers, recommend using calc(). 3 div widths equal width:calc(33% - 50px / 3) , 50 pixel wide div can still set width:50px.