Issue with HTML / CSS floating towards right

Question

I am trying to create a two column design with the second column having three sub columns.

            <div class="section group green">
                <div class="col span_1_of_4">
                    <div class="left">floatleft - </div>
                </div>  
                <div class="col span_3_of_4">
                    <div class="section group right">
                        <div class="col span_1_of_3 ">
                            To be placed on extreme left
                        </div>    
                        <div class="col span_1_of_3 ">
                            To be placed on center
                        </div>    
                        <div class="col span_1_of_3 ">
                           extreme right
                        </div>    
                    </div>    
                </div>  
            </div>        

Here is the fiddle http://jsfiddle.net/CBZZU/3/embedded/result/

Though the wrapper for second column (col span_3_of_4) has width more than 600px, every content is getting clumped towards the right. Even the sentences are getting into multiple lines irrespective of having enough size.

How can i avoid contents getting clumped to right?They should be placed in right side, but should occupy complete space instead of line breaking

Answer 1

Like this ? http://jsfiddle.net/CBZZU/5/

HTML :

<div class="section group green">
    <div class="col span_1_of_4 left">
        <div>floatleft - </div>
    </div>  
    <div class="col span_3_of_4 right">
        <div class="section group">
            <div class="col span_1_of_3 ">
                To be placed on extreme left
            </div>    
            <div class="col span_1_of_3 ">
                To be placed on center
            </div>    
            <div class="col span_1_of_3 ">
               extreme right
            </div>    
        </div>    
    </div>  
</div>

CSS:

.green {
    background:green;
}
.left {
    float:left;
    background:blue;
}
.right {
    width:100%:
    float:right;
    background:red;
}

Answer 2

The problem is your div class="section group green" gets shrinked because it's floated to right. Giving it width: 100% will solve your problem.

Answer 3

Add width: 100% to either .group or .section.