I just need some clarification. You say up to bottom. Do you mean top to bottom first? if so I need to know max rows you want. Anyways here is my first stab at what I read if I understand it right. You can take the style attributes and make them classes in a css file.
There are a couple of things to remember here.
Your parent container div must have a width either fixed width or a width inherited from a parent in which case you would change the width to 100% instead.
Next they must float left and have some height.
I think that the width 33% is self explanatory.
Joined: Aug 07, 2013
Yes, I meant from top to bottom first and then left to right. as for the max row, it depends on the current window size. so each div will have several lines of hyperlinks in it. the number of lines in each div depends on the xml fed to the application. for example :
if this is the XML fed to the application, then there will be three divs in the page where the first div has 4 lines, second has 2 and the third has three and so on. The structure of XML will always be like this, there won't be any variation to the XML structure. what I want is the browser will try to fill the first column first (the leftmost column) with as many divs as possible, and then if the lines left in the first column, then the next entire div will be put to second column (middle column). so the whole content of a div will never be separated to different columns. each div will have at most 10 lines, and there won't be more than 10 divs. I need this working for at least 1280x768 resolution. it's okay if the content gets misplaced all over the window if the window size is reduced to smaller size than that.
thanks for the reply.
Joined: Mar 21, 2001
Wow, you just increased the difficulty magnitude by 10. Here would be the way I might handle it.
The complexity is determining what the bottom means and determining how to hide the styles of the other column divs when there is no content. If it was just the items displaying then it might not be too bad, but if you have group headers that must also display then determining what is bottom becomes more difficult and might not be possible with just css. Divs with float were designed to work like a news paper and float left or right, but never top to bottom. I'm not even sure what you are trying to do is even possible, but it will definitely require some calculations thus not strictly css. The code behind could calculate how many items (and headers) would fit in the column and then give you the result of items(and headers) for that column and then recalculate for the next column until all three columns are full. I would be interested in hearing what you ultimately come up with as your solution. Keep in mind that if you ever change the font size or other style it might throw off the whole layout.
Question: How do you want it to handle if the screen size is larger?
Joined: Aug 07, 2013
It'll still behave the same way if the screen is larger. In the unlikely event of monstrous screen size (all div would fit in one column), so be it, one column it is. from your code, I can extract the CSS to:
this is what I've been using, but since the divs are not equal in number of lines, the display becomes really ugly. and also, does <loop> tag have some sort of logic or css inside it?