File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes div positioning forming three columns Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "div positioning forming three columns" Watch "div positioning forming three columns" New topic
Author

div positioning forming three columns

Andrew Cane
Ranch Hand

Joined: Aug 07, 2013
Posts: 91
Right now, I want to add some div sections dynamically, and each div's is around 1/3 page wide. I wish to know if it's possible when the divs are being added dynamically, it will first go from up to bottom, then from left to right, forming 3 columns. is this possible using CSS only without javascript? I'm pretty sure CSS will automatically handle if the window is being resized. thanks
Ryan Tracy
Ranch Hand

Joined: Mar 21, 2001
Posts: 33
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.
Andrew Cane
Ranch Hand

Joined: Aug 07, 2013
Posts: 91
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.
Ryan Tracy
Ranch Hand

Joined: Mar 21, 2001
Posts: 33
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?
Andrew Cane
Ranch Hand

Joined: Aug 07, 2013
Posts: 91
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?
thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60997
    
  65

You might want to check out 'faux' columns

P.S. There is no <loop> tag in HTML. Looping is something you would generally do on the server side with JSP or PHP markup.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Andrew Cane
Ranch Hand

Joined: Aug 07, 2013
Posts: 91
Haha, yes, I know there's no such thing as <loop> tag in html. I'm just asking since I'm expecting a pure CSS/HTML tag solution without javascript, since javascript is handled by another vendor. thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60997
    
  65

At what point was JavaScript mentioned?
Andrew Cane
Ranch Hand

Joined: Aug 07, 2013
Posts: 91
sorry, are you talking about your link or the <loop> tag? I was referring to the <loop> tag. as for your link, could you please tell me how the CSS can be applied in my case? thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60997
    
  65

Andrew Cane wrote:sorry, are you talking about your link or the <loop> tag? I was referring to the <loop> tag.

Again, there is no <loop> tag. So it's irrelevant to say anything about it.

as for your link, could you please tell me how the CSS can be applied in my case? thanks

Not really. Only you can look at the examples and see if one of them applies to your particular situation.
Ryan Tracy
Ranch Hand

Joined: Mar 21, 2001
Posts: 33
Here is a possible solution:



You would have to determine what data ended up in the left/middle/right columns and add the class appropriately.

this was only tested using Chrome Browser. You might have to test it in others to see if it works.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: div positioning forming three columns