Radu 0

How can I create fixed size elements that when resizing the parent element they will wrap to a new row (like inline elements) ?
Se attached screenshot of what i'm trying to do.

Tried using:

  • SPAN ( problem: inline elements can't have fixed size )
  • TABLE (problem: I have a fixed number of cols and rows , so I will need a script to move some TD to a new row.)
  • DIV position ... ( problem: When using positioning like tables I'm seting a default number of rows ... so I nedd a script to change this.)

How can it be done using just HTML and CSS ?

1 answer

3
points
This was chosen as the best answer

The css 'float' property is perfect for what you are trying to acheive. It positions block level elements in any available space to the left or right of the last element. e.g. using the following html...

<div id="wrapper">
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="box"></div>
   <div class="clear"></div>
</div>

...and this css...

div.box {
   margin: 10px;
   width: 150px;
   height: 100px;
   float: left;
}

div#wrapper {
   width: 500px; 
}

div.clear {
   clear: left;
}

The last div in the wrapper is used to clear any preceding floats. It will ensure that the wrapper adjusts it's height if necessary.

Answered over 8 years ago by Tom Bowers
  • I thought about float, but did not have time read about it and test it, but this is what I was looking for. Thanks. Radu over 8 years ago