difficult problem with floating blocks

Hello,

I try to do the following design:

There are some quantity of blocks. The quantity is different each time I draw the page.
They all included in one outer block with width in %.

Each block includes:
- one image (always the same, width="40px")
- one string (there are <=15 characters, every character could be different); the length of the line could be more than the width of the image above it

I need:
1. All blocks should be the same width.
and
2. Blocks should occupy all empty place within outer block line by line, i.e. if, for example, 3 blocks are enough to full the first line, the 4d block should be right under 1st, 5th - under 2nd and so on.
By eye blocks should become arranged like in a table.

How can I do that?

Thanks in advance.

 

Well if the outer box is dynamic, then your inner content has to be dynamic aswell. So if you want to fit 3 boxes along the width, then you're look at 100%/3 which will pretty much become 33% for each box inside the outer box. You can use decimal points if you want to be more accurate, but for the example below ill just round it off.

Here's a quick example of the code I created:

<style type="text/css">
#outer {
width:89%;
height:100px;
background-color:#003399;
padding-left:3px;
}
.inner {
width:33%;
float:left;
margin:2px;
height:50px;
background-color:#666666;
}
</style>
<div id="outer">
	<div class="inner">Your Text Goes here!</div>
	<div class="inner">Your Text Goes here!</div>
	<div class="inner">Your Text Goes here!</div>
	<div class="inner">Your Text Goes here!</div>
	<div class="inner">Your Text Goes here!</div>
</div>

Code (markup):

Mind you I added some margins and colors to make it centered, and to distinguish the colors. So you can use this as a base to work off of, assuming this is what you want.

 

Your answer is right there - if you don't want to use a table, you cannot have dynamic height containers.

Use a table... the only other 'real' answer is manual clears and 'faux columns' which may or may not be a great answer.

 

I can't count the quantity of blocks per line beforehand. If outer block is narrow, even one inner block should be allowed.

And what if one text line will be much longer than others? I need all blocks have the same width anyway.