Can css do > child-div-width = parent-width/number-of-child-divs?

I’ve got a container div that holds an arbitrary number of widgets. I would like to have the width of each widget auto adjust so that each widget takes up the same amount of horizontal space within the container div. Is this something that can be accomplished with modern browsers today using css alone?

If I were to express it mathematically, the formula would be…

 widget-width = container-width/number-of-containers)

My markup is below

<div class="pre-footer">
		<div class="single widget_text">
			<h4>Widget Heading</h4>			
			<div class="textwidget">Widget text goes here.</div> 
		</div>		
		<div class="single widget_text">
			<h4>Widget Heading</h4>			
			<div class="textwidget">Widget text goes here.</div> 
		</div>		
		<div class="single widget_text">
			<h4>Widget Heading</h4>			
			<div class="textwidget">Widget text goes here.</div> 
		</div>		
	</div>

In this example, the “pre-footer” div is the main container and its width is defined in the css as 900 pixels. Since there are 3 child divs (singe widget-text), I’d like each of these to occupy about 300 pixels of width.

CSS3 holds out the promise of this: http://www.w3.org/TR/css3-flexbox/

You can use floats/inline-blocks and %:

  • the parent width = 100%
  • each child element = 33.33%

Drawbacks.

You can if you know how many blocks you need. I think Scott is asking about setting up a generic codebase that will work with a varying number of blocks.

Exactly :slight_smile:

Thanks for clarifying that Stevie

I think you could probably use Javascript to count the number of blocks (assuming there was a class name used on those blocks and not on anything else), which could then be used to set the width of each as 100 ÷ {number} %. But I don’t know enough about Javascript to be able to do that easily. And it would very likely cause a visible flicker as the page was re-drawn.