CSS Float divs sitting as block not as grid

Question

Please Check out the fiddle on http://jsfiddle.net/Qu63T/1/

What I want is The green div to float next to the blue one. and the .block divs to appear as a grid. I don't want to remove the .m div and float the .blocks inside the container. What Can be done without specifying width of .m

No JavaScript Only CSS Solution

Answer 1

You can add a a wrapper div, after .m and before .block and set his width:

<div class="m">
     <div class="wrapper">
           <div class="block">
           (...)
           </div>
     </div>
</div>

Style:

.wrapper{
    width:100px;
}

Or you can add some padding in .m, so the blocks will line-break. But that's a wierd solution.

Answer 2

as i understand your question that you want floated div's work like block div's your CSS: .

block{
        border: 1px solid white;
        float: left;
        display: inline-block;
        clear:left;
    }

check this http://jsfiddle.net/sandeep/Qu63T/6/

Answer 3

Your best solution in this case would be to assume that "m" isnt floating, its just a padded div sitting inside a bigger container, and the blue div is living absolutely positioned, like this:

.c{
background-color: red;
display: block;
position: relative;
overflow: hidden;
}
.l{
background-color: blue;

height: 40px;
width: 120px;
display: inline-block;
position: absolute;
left: 0;
right:0;
}
.m{
display: block;
position: relative;
margin-left: 125px;
}
.block{
border: 1px solid white;
float: left;
display: inline-block;
background-color: green;
}

http://jsfiddle.net/Qu63T/7/