2 column additions

DaFou
DaFou used Ask the Experts™
on
HI All,

How do I create a region of a fixed size where in I can place an X amount of spans. I want the spans to align next to each other over 2 items.
On every 3rd or subsequent odd numbhered item I want the span to break underneath. Something like this:
|------|
||-|   |
||a|  |
||-|   |
|------|

|------|
||-||-||
||a||b||
||-||-||
|------|

|------|
||-||-||
||a||b||
||-||-||
||-|   |
||c|   |
||-|   |
|------|

|------|
||-||-||
||a||b||
||-||-||
||-||-||
||c||d||
||-||-||
|------|
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Well I am not sure about spans (it might work the same or may need some extra css) but with div's you do this

.Container { width: 225px; border: solid 1px red; }
.Item { float: left; width: 100px; border: solid 1px orange; }

<div class="Container">
       <div class="Item">a</div>
       <div class="Item">b</div>
       <div class="Item">c</div>
       <div class="Item">d</div>
       <div class="Item">e</div>
       <div class="Item">f</div>
      <div style="clear: both;"></div>
</div>

I added the borders to the styles so you can see the divs.  So basically just generate as many "Item"s as you want and only two will fit per line.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial