CODEWITHSUNDEEP
csshtmlcss-float
Googlebot
Googlebot

Reputation: 15683

Compact arrangement of DIVs in two directions

It is easy to arrange DIVs horizontally with float. For example:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:left; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;"></div>
</div>

This will produce: enter image description here

But how to arrange the DIVs both horizontally and vertically? In this case, how to shift the Red and Purple DIVs upper where there is empty space (under Yellow and Blue DIVs)?

NOTE: This is just an example, and I wish to find a method to make the arrangement for any set of DIVs (not only this typical example).

Upvotes: 8

Views: 11788

Answers (5)

Brandon Gano
Brandon Gano

Reputation: 6710

Assuming you are working with a dynamic set of arbitrarily sized objects, there is no pure CSS method to achieve this. You can get close by using a CSS3 multi-column layout if:

  1. You only need to support modern browsers.
  2. All objects can be arranged into equal-height groups.

Here, objects are arranged in groups of 300px height.

<div id="blocks">
  <div style="height: 100px; background-color: yellow;"></div>
  <div style="height: 200px; background-color: blue;"></div>
  <div style="height: 300px; background-color: green;"></div>
  <div style="height: 200px; background-color: red;"></div>
  <div style="height: 160px; background-color: purple;"></div>
</div>

#blocks {
  -moz-column-count: 3;
  -moz-column-gap: 0;
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  column-count: 3;
  column-gap: 0;
  width: 450px;
}
#blocks div {
  width: 150px;
}

http://jsfiddle.net/RTLun/

Upvotes: 6

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

For arrange divs vertically you may use jquery plugin masonry

It has effect like this:
work of jquery.masonry

This plugin is very easy to use:

    $(function(){
      $('#container').masonry({
        // options
        itemSelector : '.item',
      });
    });

and this live demo showed how it work in your example

Upvotes: 2

sandeep
sandeep

Reputation: 92813

You can do it without manipulating the markup like this:

<div style="width: 500px;">
 <div style="float:left; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="float:left; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="float:right; width: 140px; height: 240px; background-color:Green;margin-right:10px"></div>
 <div style="float:left; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="float:left; width: 130px; height: 160px; background-color:Purple;margin-top:-40px;margin-left:20px"></div>
</div>

Check the fiddle

http://jsfiddle.net/E6VkW/

Upvotes: 1

Thunraz
Thunraz

Reputation: 570

Or if you are no big fan of absolute positioning (like I am) try this:

<div style="width: 500px;">
    <div style="float: left;">
        <div id="yellow"></div>
        <div id="red"></div>
    </div>
    <div style="float: left;">
        <div id="blue"></div>
        <div id="purple"></div>
    </div>
    <div id="green"></div>
</div>

With the corresponding CSS:

#red {
    width: 180px;
    height: 200px;
    background-color: Red;
}

#yellow {
    width: 200px;
    height: 100px;
    background-color: Yellow;
}

#blue {
    width: 150px;
    height: 60px;
    background-color: Blue;
}

#green {
    float: left;
    width: 140px;
    height: 240px;
    background-color: Green;
}

#purple {
    width: 130px;
    height: 160px;
    background-color: Purple;
}

Here's a small demo.

Upvotes: 1

Baz1nga
Baz1nga

Reputation: 15579

you could use position:absolute css property along with top,left to achieve the same.

<div style="width: 500px;">
 <div style="position:absolute; width: 200px; height: 100px; background-color:Yellow;"></div>
 <div style="position:absolute; left:200px; width: 150px; height: 60px; background-color:Blue;"></div>
 <div style="position:absolute;left:350px; width: 140px; height: 240px; background-color:Green;"></div>
 <div style="position:absolute;top:100px; width: 180px; height: 200px; background-color:Red;"></div>
 <div style="position:absolute; left:200px;top:60px;width: 130px; height: 160px; background-color:Purple;"></div>
</div>

Live demo

Upvotes: 2

Related Questions