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

Question

I want to split a container into 3 rows. where first rows have 2 columns (display 2 elements side by side).

second row have 3 columns where the third column again split into 2 columns say 23a and 23b. 23b again have 2 rows.

Third row have 2 columns (similar to first row.)

This is my parent container:

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

}

I tried multiple combinations. but didn't got success to achieve what i want. can some one please help me.

Thanks

Answer 1

Here is a fiddle of what you described: http://jsfiddle.net/fvGMb/

You need to have rows with a set width and then you can have columns that go in those rows with percentages that describe the width you'd like them to be. The columns need to be 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>