I’ve been in this situation quite often: We have a list of elements that need to be laid out on the page in the following manner:

  • Each element has fixed width / height.
  • There are a number of elements in a row.
  • There must be an equal space between any two elements.

[caption id=“attachment_95” align=“alignnone” width=“255” caption=“Even spaces between each cell”]Even spaces between each cell[/caption]

Well, this is a classic case for a table! Yes! I can see it happening; with the right cellspacing and background color, it will be perfect.

NOT.

So, CSS. The requirements are:

  • Each item is 50x50 pixels.
  • 15 pixels between items.
  • 4 items in a row.

We?ll create a

    to contain all the items. Its width will be 245 pixels, to house 4 items and 3 spaces between them (450 + 315). To create a list of items in a row we shall use float: left (or right) in order to place the elements on a particular side. Every time an item reaches the edge of the box in which it is contained, it will drop down to the next row. To create the spaces between the items, we?ll use margin-right. And here is the catch:

    [caption id=“attachment_97” align=“alignnone” width=“255” caption=“The white spaces are the margins on items that are supposed to be in the first row”]The white spaces are the margins on items that are supposed to be in the first row[/caption]

    As you can see, the spacing is created for each item.

    Due to a lack of spacing on the right, the last block of each row drops down. Because of the bottom margins, there is superfluous space at the bottom of the container. Our design has gone wrong.

    How about if we don?t want the last column to have a side margin and the last row a bottom margin?

    The sophistication of CSS3 (nth-child) is yet to be here.

    The Trick

    We keep the margins.

    We?ll enlarge the container

      to 260 pixels, so that it contains the right margin of the last box.

      We create another wrapper div, hide the overflow and give it a width of 245 pixels, and inside we place the

        with our items. The
          with the items will actually flow on, but because we?ve ?trimmed? it the new wrapper div, we won?t see the superfluous space on the side.

          And what about the space at the bottom? We?ll give the

            containing the items a negative margin-bottom as large as the items’ lower margin.

            Code

            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            
            <style type="text/css">
            .item-list-wrapper {
              overflow:hidden;
              width:245px;
              border:5px solid #000;
              font-family:verdana;
            }
              .item-list,.item-list>li { margin:0; padding:0; list-style:none; }
              .item-list {
                  overflow:hidden;
                  width:260px;
                  margin-bottom:-15px;
              }
                  .item-list li {
                      background-color:#ADCBDA;
                      width:50px;
                      height:50px;
                      margin-right:15px;
                      margin-bottom:15px;
                      float:left;
                  }
            </style>
            <div class="item-list-wrapper">
              <ul class="item-list">
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
                  <li>item</li>
              </ul>
            </div>
            

            This example can contain as many

          • ’s as you want, without harming the layout.

            Table Layout in CSS - Example page

Comments