The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Hybrid View

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.

That doesn't make sense
The blocks have the same width all the time and the text within wont effect that size.

It is so in your example, but I can't use width in pixels, because I really don't know the length of each string. And the problem is I need all blocks have the same width, i.e., roughly speaking, set by the widest of them.

Originally Posted by markbrown4

Perhaps you provide code which the displays the problem you want to fix.

Now I only use css rule
float: left; padding: 0 2em 2em 0;
for inner blocks.

Originally Posted by markbrown4

You can add overflow: hidden to each block to chop off the text that hangs outside the given dimensions?

It can't be done in css I'm afraid if I understand correctly what you are asking for. You could do something silar with a table but you wuld need to set the number of cells beforehand which it seems you can't do. Therefore I don't think you can do exactly what you want in tables either.

The only solution would be to script the answer which means finding out the width of the widest elements and then applying that to each floated block with the appropriate margins to fit.

All in all it seems you are asking css to cover what is essentially a programming problem. CSS only defines the look of elements but doesn't adjust their sizes in respect to anything else.

Table cells will automatically adjust in relayion to other cells but you would be limited to only so many cells per row which you would have to decide beforehand.

I would suggest a simple design perhaps unless you are good at scripting