CSS Block float left

Question

I have this html file

    <div class="con" style="width:100px;height:200px;">
        1
    </div>
    <div class="con" style="width:100px;height:200px;">
        2
    </div>
    <div class="con" style="width:100px;height:400px;">
        3
    </div>
    <div class="con" style="width:100px;height:400px;">
        4
    </div>
    <div class="con" style="width:100px;height:100px;">
        5
    </div>
    <div class="con" style="width:100px;height:100px;">
        6
    </div>
    <div class="con" style="width:100px;height:100px;">
        7
    </div>
    <div class="con" style="width:100px;height:100px;">
        8
    </div>

And I want with this html have this result :

But I write this css :

<style>
body {
width:440px;
height:440px;
}
.con{
float:left;
background:#bebebe;
margin:1px;
}
</style>

And I got this result! :-(

I repeat that I would have the result of the first image using only the html code that I wrote.

Answer 1

Firstly, you shouldn't have multiple items with the same id. This is what class is for. id should be unique within the page.

The solution is to your problem is to float the two tall blocks to the right and everything else to the left.

This will of course only work if the boxes are in a container (ie the body) that is just the right width for all four, otherwise you'll just end up with a gap in the middle of your layout.

The trouble is that because you've got the same ID for everything, you can't easily specify which ones to float right and which ones to float left.

There are ways to do it, but the correct solution would be to use classes.

<div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

If you absolutely cannot (or will not) change the HTML code, there is still one other solution I could suggest - the CSS [attr] selector will allow you to specify a different CSS style for elements that have particular attributes. In this case, you could use it to pick out the tall blocks and float them right.

#con[style~='height:400px;'] {float:right;}

This will only affect the elements that have id="con" and where the style attribute includes height:400px;.

However please note that the [attr] selector does not work on older version of IE, so you may need to excersise caution if you decide to use it.

This solution also involves floating certain elements to the right, which you seem to be dead set against, but it is still the only viable CSS-only solution.

Answer 2

change the width of the body to 408px; then float:right; the div 3 & 4.

demo: http://jsbin.com/imire5

Updated demo with float left only: http://jsbin.com/imire5/2

Answer 3

The basic issue you have is that CSS float works in a way that is different to how you want it to work.

Another answer to your problem might be to use Javascript to hack it.

There is a jQuery plug-in called Masonry which looks like it does what you're after. You can use float:left; for everything, and then use Masonry to close up the gaps.

It would mean relying on a solution that isn't entirely CSS-based though, which probably isn't ideal - especially since I've already given you a working CSS-only solution.

(also once you start using Javascript, you definitely need to fix your id vs class problem -- Javascript will disown you if you have all those elements with the same id)