Geek Answers Handbook

Layout div in rows then columns

I have a container div and 3 div inside it, as shown below.

 <div> <div>1</div> <div>2</div> <div>3</div> </div>

I do not know about the contents of each div inside, but they have a variable height and width.

The height of the container is determined by the highest div inside.

I want to show these div so that they first fill the height (from left to right) and then move on to the next column, as shown below.

 +------------------+ |+-------++-------+| || || || || || || |+-------+| || |+-------+| || || || || || || || |+-------+| || | +-------+| +------------------+

Obviously, if these div all large and cannot fit in one column, the layout will have 3 columns, as shown below

 +---------------------------+ |+-------++-------++-------+| || || || || || || || || || || || || || || || || || |+-------+| || || | | || |+-------+ | || | +-------+| +---------------------------+

Question: Is it possible to do this using CSS only and how?

EDIT :

  • There are a few things I need to clarify.
  • A container can contain no more than 2 or 3 columns (no more than 1 column and no more than 3).
  • The width of the container is not fixed, but the same with all the inner divs.
  • The height of the container is determined by the highest inner div. for example, if the highest div is 300px the height of the container, there will also be 300px.
  • the other two shorter divs should decide whether they can fit in one column or should appear in two separate columns. based on an example (previous item).
  • The remaining two smallest divs must be in the same column or two columns.
  • none of the inner divs should be wrapped.

Example : div Heights: 1st 300px, 2nd 100px, 3rd 150px
Result: this is a two-line layout (second and third in the same column).

Example : div Heights: 1st 100px, 2nd 300px, 3rd 150px
Result: this is a 3-column layout.

Example : div Heights: 1st 100px, 2nd 200px, 3rd 300px
Result: this is a two-line layout (1st and 2nd in one column).

Example : div Heights: 1st 100px, 2nd 210px, 3rd 300px
Result: this is a 3-column layout.

+2
source share
2 answers

The CSS solution for columns only may be to use column-count and max-height in the container ( div wrapper).

This is similar to what you want, at least to some extent. But this can break divs when breaking columns. So I think you are probably better off with something in javascript.

Update:

After your additional conditions, I will add only this to my answer regarding the CSS approach only: column-break-inside:avoid . It is still not perfect, but a little closer to what you want. You have to assign width columns to columns, then div values ​​can be set to width:100% , the number of columns is automatic, but I'm not sure if you can dynamically adjust the width of the container to the number of columns.

another note: to avoid partitioning in firefox, you need to use display:inline-block; .

So you can see how it works with your examples: DEMO

At least something to play with and possibly use another time; -)

+1
source

The key is to make the first two divs display:inline-block and the last float:right . Like this:

 .container{ border: 1px solid grey; width: 200px; height: auto; margin: 20px; padding: 10px; } .container .one{ border: 1px solid green; display: inline-block; } .container .two{ border: 1px solid blue; display: inline-block; } .container .three{ border: 1px solid red; float: right; } .clear{ clear: both; }

HTML:

 <div class="container"> <div class="three" style="width: 60px; height: 100px;"></div> <div class="one" style="width: 60px; height: 80px;"></div> <div class="two" style="width: 60px; height: 60px;"></div> <div class="clear"></div> </div> <div class="container"> <div class="three" style="width: 70px; height: 100px;"></div> <div class="one" style="width: 70px; height: 80px;"></div> <div class="two" style="width: 60px; height: 60px;"></div> </div>

Here is a link to the working result: http://jsfiddle.net/8xmrL/

0
source

More articles:


All Articles