Adjust width of div according to other children?

Question

I really don't know how to explain this, but I'll do my best.

I have a div(fixed with 500px for example), and I want the content to "split the width" among them equally.

How would I go about doing that?

At the moment, the children div's only take as much as required of them, and they don't enlarge to fill the entire 100% of width available to all of them.

If you don't need to support IE7 and below this is the best solution - http://stackoverflow.com/q/6310632/1499781 — Zoltan Toth, Dec 20 '12 at 02:24
I was writing something similar to the answer, @ZoltanToth mentioned. Either use a real ``, or if you're keen on semantics go for `display: table-cell;`. — Ross Allen, Dec 20 '12 at 02:28

Travis J · Accepted Answer · 2012-12-20T02:27:21.070

You could do it like this:

function getIndividualWidth(elementId,childrenCount){
 var div = document.getElementById(elementId);
 var totalWidth = div.offsetWidth;//500
 //calculating childrenCount would require a function
 //if you were not keeping track of it
 return parseInt(totalWidth / childrenCount);
}

Here is one approach to counting the child elements of your div

function getChildElementCount(element){
 var childCounter = 0;
 var startPoint = element.childNodes;
 for (var child in startPoint) {
  if (startPoint[child].nodeType != 1) continue; //not an element
  childCounter++;
 }
 return childCounter;
}

Which would change the function into this:

function getIndividualWidth(elementId){
 var element = document.getElementById(elementId);
 var totalWidth = element.offsetWidth;//500
 return parseInt(totalWidth / getChildElementCount(element));
}

Deciding when to use this would depend on how your elements are rendered on the screen. If you had them already rendered, and just wanted to start from a certain parent, you could do this:

html (the spans are inline elements, so they would need display:inline-block in order to actually reflect the change in width) see the jsfiddle here: http://jsfiddle.net/uhejM/

<div id="parent" style="width:500px;">
 <span>1</span>
 <span>2</span>
 <span>3</span>
 <span>4</span>
</div>

js

function getIndividualWidth(element){
 return parseInt(element.offsetWidth / getChildElementCount(element));
}

function EqualizeChildWidths(element){
 var width = getIndividualWidth(element);
 var startPoint = element.childNodes;
 for (var child in startPoint) {
  if (startPoint[child].nodeType != 1) continue; //not an element
  startPoint[child].style.width = width + "px";
 }
}    

EqualizeChildWidths(document.getElementById("parent"));

Calculating childrenCount is very simple using jQuery, just do `$("#theParentDiv").children().length` — Rodrigo Castro, Dec 20 '12 at 02:13
I know, I just offered a different solution using it, if OP is using jQuery, is simpler to use it than to build rather complex functions with raw javascript (nothing wrong with your functions, it's just another approach, really). — Rodrigo Castro, Dec 20 '12 at 02:17

score 0 · Answer 2 · answered Dec 20 '12 at 02:32

If i understand your question correctly use JQuery:

$('.inner').each(function(){

$(this).width(($('#fixed').width() / $('.inner').size()));

})

Float the inner objects to the left - can use absolute left with a bit more jquery code.

http://jsfiddle.net/Q57xC/3/

Adjust width of div according to other children?

2 Answers2