Reusing jQuery UI CSS to create Widget Boxes Side-by-side

I'd like to recycle jQ开发者_高级运维uery UI css to create widgetboxes that are side by side and also multiple rows...

Ideal:

[] []
[] []

My try so far ends up getting all the UI widgetboxes coalesced on top of each other. Even using tables to try forcing the distinct cells.. Here is the unsuccessful code for each cell:

<div id="1" class="ui-widget ui-state-highlight ui-corner-all" style="padding:5px;margin:3px;width:173px;display:inline;height:130px;">
  <img src="sampleimgblock.png" width="173" height="130" />
</div>

I guess I really don't understand what you are trying to accomplish. If it's 4 components 2 X 2 you could do something like this.

CSS

.ui-widget{float: left}
.ui-widget:nth-child(3){clear:both} //Only works in modern browsers

jQuery fallback

$('.ui-widget:nth-child(3)).css('clear', 'both');

This will start a new "row" every 3rd component creating something similar to your diagram.