Question

I need the following layout in HTML (S – empty space, Child – html child, can be DIV or TABLE. The layout should be resizable without help of JavaScript (CSS+HTML are the tools), it should support unlimited number of children. All children will be of the same width.

S*Child*S*Child*S*Child*S

Note, using table for this will result in: S*Child*SS*Child*SS*Child*S, which isn’t what I’m looking for.

Answer 1

I presume that you mean a grid where the Child elements appear side by side to the extent possible, then wrap to a new line, etc., automatically adapting to the available width. It won’t be a rectangular grid except by accident – mostly the last line has fewer elements than the other.

A simple approach is to use floating. Assuming simple markup like

<div class=grid>
<div>Child</div>
<div>Child</div>
...
</div>

you can use a stylesheet like

.grid div { 
width: 4em;
float: left;
margin-left: 0.2em;
background: #ccc; 
} 

This does not set any space to the right of the last Child. If such spacing is needed for some reason, you can add

.grid div:last-child { margin-right: 0.2em; }