Birnam Designs Blog -- sharing tips, resources, ideas, and more on web development and design

One good trick using CSS is making wrapping blocks of elements. Grouping elements together used to be something developers used table cells for, but when CSS started to be used more regularly, alternate methods were invented. A common use is converting <ul> lists (which are typically vertical structures) into horizontal menus. The really good thing about the CSS-based solution is its flexibility when wrapping is involved.

For table-based designs, the number of rows and columns had to be preset. With a CSS-based wrapping solution the size of the container can dictate the wrapping. For instance:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

Can be produced like this:

ul.wrapping_blocks li { list-style: none; float: left; padding: 10px; border: solid 1px #aaa; } ul.wrapping_blocks li .block { width: 120px; height: 20px; background-color: #1B2B3A; color: #fff; }

<ul class="wrapping_blocks"> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> <li><div class="block">block</div><div class="caption">caption</div></li> </ul> <div style="clear: both; "> </div> <!-- necessary to cancel float ... -->

The “block” and “caption” groups are kept together, and sequentially listed in the HTML. They are all floated, and therefore ’stacked’ horizontally, wrapping at the edge of the container. An arbitrary number of these groups can be placed using the same code, and the wrapping is taken care of by the rendering. Here is the same code with ten blocks:

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

To get an even better demonstration, this link will open a new window that you can resize and watch how the wrapping takes place.

At first one of the drawbacks of doing this with CSS as opposed to table is the lack of a border-collapse style! As you can see from the examples above, the bordering edges are doubled. Uh-oh! Border-Collapse only applies to tables!

No problem, just reduce the right and bottom margins by -1. If you want thicker borders, just change these margins to the negative border thickness.

• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption
• block
  caption

.collapsedborders li { margin: 0 -1px -1px 0; }
<ul class="wrapping_blocks collapsedborders"> ... </ul>

This entry was posted on Thursday, November 16th, 2006 at 5:29 pm and is filed under css, quick tips, development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.