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 this html to get this result:

But I am writing 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 will have the result of the first image using only the html code that I wrote.

Answer 1

First, you should not have multiple elements with the same id . To do this, you need a class . id must be unique on the page.

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

This, of course, will only work if the boxes are in a container (i.e. in the body), which is only the right width for all four, otherwise you just get a gap in the middle of your layout.

The problem is that since you have the same identifier for everything, you cannot easily indicate which ones will float to the right and which ones will float to the left.

There are ways to do this, but using classes is the right solution.

 <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) modify the HTML code, there is another other solution that I could suggest - the CSS [attr] selector allows you to specify a different CSS style for elements that have certain attributes. In this case, you can use it to select tall blocks and swim them.

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

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

However, note that the [attr] selector does not work in the old version of IE, so you may need to warn caution if you decide to use it.

This solution also includes swimming certain elements to the right, which seems to be nasty, but it remains the only viable CSS-only solution.

Answer 2

change the width from body to 408px; , then float:right; div 3 and 4.

demo: http://jsbin.com/imire5

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

Answer 3

The main problem is that CSS float works in a way that is different from how you want it to work.

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

There is a jQuery plugin called Masonry that looks like it does what you need. You can use float:left; for everything, then use Freemasonry to close the gaps.

This would mean relying on a solution that is not entirely CSS-based, but probably not perfect - especially since I already gave you a working CSS-only solution.

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