Help auto padding and centering divs

[Filarono]

Hello,
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!

[luxurychair]

This would require javascript.

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.

[Filarono]

Isn’t there a solution with no Javascript? Maybe PHP, HTML or CSS?
What about if the user has Javascript disabled?

[aspiringWebbie]

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?

[Filarono]

OK, but can I set a left and right padding to the child divs depending on their number using no javascript?

[aspiringWebbie]

I may not quite understand what you are trying to accomplish. If you are wanting to set up div’s inside another div – I do not see javascript being needed.

[luxurychair]

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.

[aspiringWebbie]

Thanks for the replay luxurychair – I actually learned something.

[Filarono]

Thanks for your help.
Isn’t there a special function in PHP to count the childs?

[Author]

Posts