CSS Floating boxes (top-down and right-left)

I am trying to make a list that automatically creates multi columns. Very easy to do this by using float:left and you have your list. But I dont want it this way, as I sorted this list alpabetical, so I want it to be presented as top-down and if there is no space left on the bottom start a 2nd column and go top-down again.

Example:

A | D | G 
B | E | H
C | F

Code (markup):

1st, I create a box (categoryBasket) with a certain height, in where the columns should be created. The boxes are called categoryBox.

.categoryBasket {
	height: 100px;
}
.categoryBox {
	width: 300px; 
	height: 20px;
	display:block;
}

Code (markup):

But, the boxes ignore the height of the basket and do not create a new column on the right side but just continue going down!

Does any one know the solution to my little prob?! Thanks in advance!

 

At this time, that cannot be done automatically with css (except for Moz support for css3 columns properties). You'll have to use a scripting language to count the entries and divide them up based on your requirements.

If you know the number of entries, you can figure it out yourself and create the columns.

Which is your situation?

cheers,

gary

 

Thanks Gary.

Actually that is all I needed to know... "Is it possible or not". Because normally I would indeed solve it easily with PHP, but everybody is so enthousastic about CSS, I thought I would give it a shot... And until now (I am sorry CSS ppl out there) my seceptism was fully grounded. Never had so many probs building a site (cross browser, equal heights columns only with JS possible, problem above, etc etc.)

Think I should wait until a mature version (CSS3?!) and give it a shot again.

Thanks anyways Gary.

 

You're actually dealing with a behavioral/variable-content problem which is best handled by scripting. There are no insurmountable css issues related to cross browser compatibility. IE is stupid and buggy. The shortcomings and bugs are generally well known as are the work-arounds and fixes.

Just as you learned the vagaries of table layouts, so must you put some time in on css. The difference is that while basic css is actually much easier to learn than table layouts, the technology is so much more powerful. With power comes more options for doing things, and with options comes the opportunity for conflicts among properties. These conflicts are all resolved sanely by the browser, but until you've learned a little, they may seem to be alligator toothed gotchas.

CSS is a reasonably mature technology. CSS1 has been around since 1996, nine of the ten years of the internet, and css2 since 1998. Parts of css3 are already being supported by the more modern browsers, as modules are made release candidates.

Take another look. That you don't feel comfortable with a proven new tool is not the fault of the tool.

cheers,

gary