[thelist] Expanding n Divs to fit Div

Justin Stach j.m.stach at canterbury.ac.uk
Wed Mar 17 05:40:52 CST 2004


Hello,

This problem's been causing me to scratch my head for a while, mainly 
because it should be a total doddle, but for the life of me I can't 
work it out.

Anyway: I have 1 to many div elements (in the example below with the 
class 'indice') which I want to stack from left to right, expanding to 
fit a containing div (id holder) with a known size. I don't know in 
advance how many of the contained divs I'm going to have, as the page 
will be built dynamically, but what I want is for the width of the div 
to be equal to holder/numberOfIndices - much like what would happen if 
I used a table (included in the example below for reference).

Yes, I could work out the width programatically and apply the width 
that way, but that seems a disgustingly kludgey way to resolve the 
problem. Hopefully I'm missing something blindingly obvious...

Ta in advance,

Justin

#holder {
	width: 100%;
	border: 1px solid green;
	clear: both;
	margin-bottom: 33px;
}

.indice {
	float: left;
	border: 1px solid red;
	text-align: center;
}

<div id="holder">
	<div class="indice">A</div>
	<div class="indice">B</div>
	<div class="indice">C</div>
	<div class="indice">D</div>
	<div class="indice">E</div>
	<div class="indice">F</div>
	<div class="indice">G</div>
</div>
<table id="holder" width="100%">
	<tr>
		<td class="indice">A</td>
		<td class="indice">B</td>
		<td class="indice">C</td>
		<td class="indice">D</td>
		<td class="indice">E</td>
		<td class="indice">F</td>
		<td class="indice">G</td>
	</tr>
</table>



More information about the thelist mailing list