CSS div float - top to buttom and left to right

Question

how can i put the div's from top to buttom and left to right

example: http://jsfiddle.net/ZWxGW/2/

http://jsfiddle.net/ZWxGW/2/ enter image description here

SOLUTION http://jsfiddle.net/pMbtk/33/

does left to right and then top to bottom workout for you?? – Sunil Kumar B M Feb 06 '12 at 12:06 — Sunil Kumar B M, Feb 06 '12 at 12:06
no :/ ... i need the order from top to bottom – user970727 Feb 06 '12 at 12:11 — user970727, Feb 06 '12 at 12:11

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

You can use the column-count property for this type of function:

Check my previous answers for this

I want to show list items as 2 or more columns (dynamic alignment)

edited May 23 '17 at 11:48

Community

1
1

answered Feb 06 '12 at 12:10

sandeep

91,313
23
137
155

my contentDiv has an specify height and the message's has a dynamic height (sometimes only one word ... sometimes a text with 10 words). EDIT: ok, it works. Realy nice solution! thanks! http://jsfiddle.net/pMbtk/33/ – user970727 Feb 06 '12 at 12:18

score 0 · Answer 2 · answered Apr 05 '12 at 04:12

you can try this...

ul {
    width:60px; height: 60px;
}

ul li{
    float:left;
    width:20px;
    list-style:none;
}
ul, ul li {
    -moz-transform: rotate(-90deg) scaleX(-1);
    -o-transform: rotate(-90deg) scaleX(-1);
    -webkit-transform: rotate(-90deg) scaleX(-1);
    -ms-transform: rotate(-90deg) scaleX(-1);
    transform: rotate(-90deg) scaleX(-1);
   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=-3.061616997868383e-16,
            M12=1,
            M21=1,
            M22=3.061616997868383e-16,
            SizingMethod='auto expand');
}

untested in IE http://jsfiddle.net/rlemon/Y5ZvA/3/

score 0 · Answer 3 · answered Feb 06 '12 at 12:08

0

.message {

 width:90px;
 margin:3px;
 background-color:#dfdfdf;
 float : left;
}

Try this if left to right and top to bottom works out for you.

answered Feb 06 '12 at 12:08

Sunil Kumar B M

2,735
1
24
31

score 0 · Answer 4 · answered Feb 06 '12 at 12:14

1) In this case you have to take column div(s) (red colored in image) and you have to put other divs 1,2,3,4 inside this div... as in image
arrangement give below properties to div.

.message,.outer_div{
float:left;
height:auto;
width:200px;
}

2) in another case,
if you want from left to right,top to bottom, then you don't need to have a outer div...specified in red color

score -1 · Answer 5 · answered Feb 06 '12 at 12:06

-1

Remove height from contentDiv and put float:left; so that it wraps your content.

http://jsfiddle.net/ZWxGW/5/

answered Feb 06 '12 at 12:06

Gurvinder

760
2
8
16

That's just not what he asked for, is it? – Jasper Feb 06 '12 at 12:09
the height is important (cant't change it) and when i add the float:left the order (top to bottom) is not correct. – user970727 Feb 06 '12 at 12:10
Check this fiddle http://jsfiddle.net/ZWxGW/10/ hope that will help you show this thing cross browser. – Gurvinder Feb 06 '12 at 12:29

ParPar · Answer 6 · 2012-02-06T12:17:11.020

-2

I tried this in your example:

.message {

 width:90px;
 margin:3px;
 background-color:#dfdfdf;
 position:absolute;

}

and it helps.

Good-Luck !

edited Feb 06 '12 at 12:17

answered Feb 06 '12 at 12:05

ParPar

7,355
7
43
56

CSS div float - top to buttom and left to right

6 Answers6