html - how to split a container into multiple rows where each rows have different columns -

i want split container 3 rows. first rows have 2 columns (display 2 elements side side).

second row have 3 columns third column again split 2 columns 23a , 23b. 23b again have 2 rows.

third row have 2 columns (similar first row.)

this parent container:

.container { position:fixed; margin-top:-325px; width:75%; height:75px; background-color:#300000;  } 

i tried multiple combinations. didn't got success achieve want. can 1 please me.

thanks

here fiddle of described: http://jsfiddle.net/fvgmb/

you need have rows set width , can have columns go in rows percentages describe width you'd them be. columns need floated.

css

.col {     float: left; } .row {     width: 100%; } .half {     width: 50%; } .third {     width: 33.33%; } 

html

<div class="row">     <div class="col half">     </div>     <div class="col half">     </div> </div> <div class="row">     <div class="col third">     </div>     <div class="col third">     </div>     <div class="col third">         <div class="col half">         </div>         <div class="col half">         </div>     </div> </div>