- This topic is empty.
June 7, 2010 at 1:00 pm #29136
I have a div with width=325px. I would like to add into that div one or more others div with width=70px.
How can I set the padding depending on the number of the divs?
Thank you & bye!June 7, 2010 at 6:10 pm #77277luxurychairMember
With jQuery it would be something like this:Code:var numChildren = $(“#wrapper div”).length();
var excessRoom = $(“#wrapper”).width() – (numChildren * $(“#wrapper div”).first().width());
$(“#wrapper div”).css(“padding”, (excessRoom / (2 * numChildren)));
// 2 * numChildren in the denominator because we add equal padding to both sides.
This code is untested but the principal should stand up. I don’t know you’re handling more than 5 (the most you could fit in that width), so I’ll leave that to you. Also not sure what kind of padding you wanted. Left/right only? all the way around? you can change it to whatever you want.June 8, 2010 at 6:22 am #77310
If you are wanting the other div to be centered – add another div within the 325width div and add "margin: 0 auto;" to it. Do not set the padding to the main 325px width div – but apply the padding to the div / div’s within the parent container. Maybe this will help?June 8, 2010 at 9:27 am #77317
The problem is that he wants the divs equally spaced in their parent container (if I’m reading the question correctly). Because you can’t do math in CSS (dividing the total space by the number of elements) you can’t adjust for a differing number of elements.
It would be possible though to do the math in PHP before hand if PHP knows how many elements there are. The math would be very similar to the math shown in the jQuery example above but you would just add the widths to a style="" attribute or make a custom CSS class for the inner divs which changes based on how many there are. "DivWith3Siblings", "DivWith5Siblings", etc with each of the CSS classes having a different amount of padding.June 8, 2010 at 1:17 pm #77354
Thanks for the replay luxurychair – I actually learned something.June 9, 2010 at 4:07 am #77413
Thanks for your help.
Isn’t there a special function in PHP to count the childs?
- The forum ‘CSS’ is closed to new topics and replies.