• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

div positioning forming three columns

 
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Ranch Hand
Posts: 47
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 91
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 47
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Posts: 91
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.

 
Andrew Cane
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
At what point was JavaScript mentioned?
 
Andrew Cane
Ranch Hand
Posts: 91
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Posts: 47
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
reply
    Bookmark Topic Watch Topic
  • New Topic