6

Using the table values of the ‘display’ property

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

In this article I’ll explain how to use the table values of the CSS display property to format certain sections of a simple three-columns layout. The final layout is shown in the picture below.

The final layout Figure 1. The final layout

The relevant sections that will be formatted with such values are highlighted in the following picture.

Navigation, sub-header and post titleFigure 2. Navigation, sub-header and post title

Table of contents

We start with the following markup:

Listing 1. Markup for the navigation menu

  1. <div id="header">
  2. <h1>CSS Magazine</h1>
  3. <ul id="nav">
  4. <li><strong>Home</strong></li>
  5. <li><a href="#">Articles</a></li>
  6. <li><a href="#">Tests</a></li>
  7. <li><a href="#">Tutorials</a></li>
  8. </ul>
  9. </div>

As you can see, the navigation menu (#nav) is contained in the #header section, where there is also the main title of the page (an h1 element. The styles could be the following:

Listing 2. Formatting the header and the navigation menu

  1. #header {
  2. height: 8em;
  3. min-height: 80px;
  4. border-bottom: 1px solid #333;
  5. background: #fff url("img/banner.png") no-repeat 0 0;
  6. position: relative;
  7. }
  8. #header h1 {
  9. position: absolute;
  10. top: -1000em;
  11. }
  12. #nav {
  13. display: table;
  14. position: absolute;
  15. top: 0;
  16. right: 0;
  17. height: 100%;
  18. border-left: 1px solid;
  19. margin: 0;
  20. padding: 0;
  21. border-collapse: collapse;
  22. width: 15%;
  23. }
  24. #nav li {
  25. display: table-row;
  26. }
  27. #nav li a, #nav li strong {
  28. display: table-cell;
  29. border: 1px solid #000;
  30. font-size: 120%;
  31. width: 100%;
  32. padding: 0 0.3em;
  33. text-decoration: none;
  34. }
  35. #nav li a:hover {
  36. background: #800;
  37. color: #fff;
  38. }
  39. #nav li strong {
  40. background: #800;
  41. color: #fff;
  42. }

View the exampleView the screenshot

The first two rules give a basic formatting to our header. We’ve set a height in ems and a minimum height in pixels. The latter equals the height of the background image that we’ll use as a banner. A minimum height gives a full visibility to our background image even when the user decreases the base font size or when the specified font used on the page is not available. The last declaration of the first rule creates a new context positioning through the value relative of the position property. Thanks to this declaration, we can absolutely position our navigation menu by taking the header section as a reference and not the whole viewport. Then we want to get rid of the heading’s text, since it must be replaced by the background image. We use absolute positioning with an enormous negative value for the top property. This value will actually make the text disappear from the page.

Then comes our navigation menu. The first declaration of the third rule turns our unordered list into a table. Since we’re working now with tables, we should be sure that there will be no extra space between the cells. For that reason, we use the border-collapse property set to collapse. By doing so, the borders of the single cells will collapse to form an unique border. Tables can be floated and absolutely positioned, since they’re actually block-level elements or, more precisely, elements that work in a block-level formatting context. Our menu will be absolutely positioned on the right and with a left border. Its height will equal the height of its container, while its width will be 15% of the container’s width.

Now we need table rows to host our cells. We turn the list items into table rows by declaring display: table-row on each li element.

Finally, we create the table cells in the fifth rule by declaring display: table-cell on the a and strong elements. The border of these cells will collapse to form an unique border, as said above. The width of the cells will be 100% of the total, plus a 0.3em of left and right padding. In case you’re wondering, the content of the cells will not overflow its container because of the type of table layout set on our menu. Tables can have two types of layout, controlled by the table-layout property: auto and fixed. The first value is used by default on all tables and it’s used also on our menu. With this value, the global width of the table will be determined by the width (and the content) of its single cells. In other words, we have a fluid table that will expand automatically together with its cells.

The sub-header

The sub-header is marked up as follows:

Listing 3. Markup for the sub-header

  1. <div id="subheader">
  2. <p id="issue">Issue 1, August 2008</p>
  3. <form id="search" action="#">
  4. <div>
  5. <label for="text">Search:</label>
  6. <input type="text" name="text" id="text" />
  7. <input type="submit" id="btn" name="btn" value="Go" />
  8. </div>
  9. </form>
  10. </div>

We want to put the #issue element on the left and the search form on the right. The code could be the following:

Listing 4. Formatting the sub-header

  1. #subheader {
  2. display: table;
  3. width: 100%;
  4. height: 1.4em;
  5. border-bottom: 1px solid #000;
  6. font-size: 120%;
  7. }
  8. #subheader #issue {
  9. display: table-cell;
  10. width: 30%;
  11. vertical-align: middle;
  12. font-weight: bold;
  13. padding: 0 0.5em;
  14. text-transform: uppercase;
  15. }
  16. #subheader form {
  17. display: table-cell;
  18. width: 68%;
  19. text-align: right;
  20. vertical-align: middle;
  21. padding: 0.5em;
  22. }
  23. #subheader form label {
  24. font-weight: bold;
  25. }
  26. #subheader form input {
  27. font: 1em Verdana, sans-serif;
  28. }
  29. #subheader form input#text {
  30. border: 1px solid #000;
  31. background: #fff;
  32. color: #333;
  33. }
  34. #subheader form input#btn {
  35. background: #800;
  36. color: #fff;
  37. font-weight: bold;
  38. border: 1px solid #800;
  39. }

View the exampleView the screenshot

The first rule turns the sub-header section into a table, sets a global height and width plus a bottom border. The second rule turns the #issue element into a table cell, sets a width on the element plus the vertical alignment of the text inside the cell (middle). The third rule turns the form into a table cell. As for the previous element, also in this case the vertical margins of this element will be resetted, since table cells cannot have vertical margins. The width of this element covers almost all the available space and this is actually our intended purpose. In fact, with the declaration text-align: right we push the form elements to the right of the sub-header, as we do want. Also in this case the elements will be vertically aligned, thanks to the declaration vertical-align: middle. The fifth rule deserves a further explanation: since the dimensions of form elements are determined also by the type and size of the used font, a good way to get consistency across browsers is an explicit declaration of font type/size on the elements we want to format (in this case, input).

The post title

The markup for this section is really simple, as you can see below.

Listing 5. Markup for the post title

  1. <div>
  2. <h2>Lorem ipsum</h2>
  3. <p>8/17/2008</p>
  4. </div>

The post title has been inserted through a h2 element and the date of the post is marked up with a paragraph having .date as its own class. The styles could be the following:

Listing 6. Formatting the post title

  1. .art-title {
  2. background: #800;
  3. color: #fff;
  4. display: table;
  5. width: 100%;
  6. margin-top: 1em;
  7. padding: 0.3em 0;
  8. }
  9. .art-title h2 {
  10. font-size: 1.4em;
  11. display: table-cell;
  12. width: 40%;
  13. vertical-align: middle;
  14. color: #fff;
  15. padding-left: 3px;
  16. }
  17. .art-title .date {
  18. display: table-cell;
  19. width: 60%;
  20. vertical-align: middle;
  21. text-align: right;
  22. padding-right: 3px;
  23. font-style: italic;
  24. font-weight: bold;
  25. }

View the exampleView the screenshot

Again, we’ve turned the outermost container into a table and its children into table cells. The vertical alignment of the text is controlled by the vertical-align property. The width of each element can be adjusted in order to satisfy particular needs. In this case, we could change the value 40% with 60%, since the content of a date doesn’t require so much space.

Download examples

examples.zip

prajapat