- This topic is empty.
-
AuthorPosts
-
June 7, 2010 at 1:00 pm #29136
Filarono
MemberHello,
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 #77277luxurychair
MemberThis 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.
June 8, 2010 at 6:22 am #77310Filarono
MemberIsn’t there a solution with no Javascript? Maybe PHP, HTML or CSS?
What about if the user has Javascript disabled?June 8, 2010 at 9:14 am #77316aspiringWebbie
ParticipantIf 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 #77317Filarono
MemberOK, but can I set a left and right padding to the child divs depending on their number using no javascript?
June 8, 2010 at 9:59 am #77349aspiringWebbie
ParticipantI 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.
June 8, 2010 at 1:08 pm #77352luxurychair
MemberThe 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 #77354aspiringWebbie
ParticipantThanks for the replay luxurychair – I actually learned something.
June 9, 2010 at 4:07 am #77413Filarono
MemberThanks for your help.
Isn’t there a special function in PHP to count the childs? -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.