I must code an html viewer which take some objects as input and provides a nice html layout. For the layout part I decided to use twitter bootstrap 2.3
prerequisites
- The objects are represented as divs of different size
- I don't know the number of divs to display in advance
Now, what I want is an "auto-adjusting" layout able to displace in the most convenient way the object in the screen. The concept is sketched in the following image:
on the left you can see the objects, on the right the desired final diplacement. I nearly get it work in this way:
<div class="row-fluid">
<div class="node span6">a box</div>
<div class="node span6">a second box</div>
<div class="node span6">a third box</div>
<!--as much divs as you want-->
</div>
but in the second line I get a bad "tilted-right" effect due to the margin-left
settings of the bootstrap css.
I also tried to override the css specification of the span
to adopt a margin-right driven approach but with no luck (if it is interesting I can provide info about this approach).
Any suggestions?