Given a a parent div which will contain many child divs at various locations, how do I give the parent Div a CSS "gravity" ?
I'd like the force of "gravity" in the parent container to come from its left side (normally the Y axis so to speak). That way when I position a child inside the container I will give it a fixed Y position and then I would want the child to fall toward the left side of the container until it hit the container or another child (Falling along the X axis so to speak).
I'd also like the parent container to be able to grow in width as the children stack up inside of it. I'm very new to CSS so please be gentle and If my question is too vague please say so and I will gladly elaborate. (See attached image)
Div with gravity
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
It seems that if you assign "float: left" to a div, then it ignores a fixed Y position (e.g. "top: 100px") you might give it.
I think you need a JavaScript solution, not a CSS solution.
Here is an example of JavaScript that involves arranging divs. It is not exactly what you want, but it does use the concept of detecting divs that overlap each other:
http://www.experts-e
Working with different div ordering (as they appear in html file) combined with float:left and clear:left will offer a mixture of results similar to what you wish.
If you then use javascript to perform actions such as ordering of divs as well as toggling clears, then achieving this effect could be very closely managed.
In your image, the 3 divs touching the left are the 3 with the css styling of clear: left.
Their ordering would be 1, 2 and 7.
Divs 3-6 would not be randomly positioned as they show in image, but all the tops at the same height. The code to create this effect is very simple javascript and css.
To achieve precise displaying as shown with multiple vertical alignments would be a pure javascript development.
Business Accounts
Answer for Membership
by: glcumminsPosted on 2008-08-21 at 14:54:14ID: 22284679
I believe you are referring to the CSS 'float' property, but it should be attached to the child divs, not to the container. For an example, please see the code below. You can modify it as needed to experiment with the float property.
Select allOpen in new window