Posts tagged CSS

This is a supplement to the first part of a five-part series of posts that detail my adventures in trying to achieve a colspan effect with the elements of a CSS layout. The posts follow this rough outline:

1. table trouble
2. script solutions
3. Opera issues
4. subpixel issues
5. conclusions

Recap

In the previous post, I introduced some of the challenges in trying to achieve a colspan effect when applying a fluid, tabular layout to non-tabular content. I also described an additional constraint for the layout, that the rendered widths of two cells in the same row must be equal at the pixel level if their specified percentage widths are equal.

I eliminated the use of an HTML table as a matter of best practice. I also eliminated the use of a CSS table (which is used by default to style an HTML table, anyway), mostly due to the idiosyncratic distribution of leftover width of the table across columns of the table. Here I describe some alternatives to using a CSS table, before discussing the colspan effect in part 2.

Read more …

This is the first of a five-part series of posts that detail my adventures in trying to achieve a colspan effect with the elements of a CSS layout. The posts follow this rough outline:

1. table trouble
2. script solutions
3. opera issues
4. subpixel issues
5. conclusions

Introduction

An HTML table element is used to define a tabular structure, whereas a CSS table display is used to define a tabular layout. Other CSS techniques (stacked, floated elements of equal width, for example) also imitate a tabular layout to some degree. This separation of structure and layout conceptually allows a tabular layout to be applied even to non-tabular content for the purpose of visual presentation.

tabular layout

Extending a table cell to occupy more than one column/row of a tabular structure is easy to achieve: The colspan/rowspan attributes of the HTML th/td elements handle this concisely. However, extending a table cell to occupy more than one column/row of a tabular layout of a non-tabular structure is daunting.

tabular layout with spanned cells

Additionally, I require that the rendered widths of two cells in the same row to be equal at the pixel level if their specified widths (expressed as a percentage) are equal. The aspect ratio of equal-width cells in the same row may be preserved by the fluid layout. Such cells would have different heights as a result of different widths, and a height discrepancy is likely to be more noticeable.

In this sequence of posts, I will describe a technique to extend an element across more than one column of a tabular layout while satisfying the above constraint. I will intimate a bit of my discovery process and address some browser compatibility issues. I will conclude by calling bollocks on the whole thing, and argue why you should use HTML tables for layout. (Hint: It’s not quite what you think.)

Read more …

This technique can be used to specify the aspect ratio of a fluid element using only CSS, no JavaScript or placeholder image required. By “fluid element”, I mean an element that can be dynamically resized. This requires that the width of the element be specified, and that the height of the element be expressed as a function of the width (or vice versa, though here the width must be specified).

The example below assumes an inline-level element in the normal flow, though the technique can be extended to block-level elements and absolutely positioned elements. 

First, the HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

The element whose aspect ratio we want to specify has the ID “element”. The element is wrapped by a container that will be used to specify the width. Additionally, the element has a dummy element as a previous sibling that will be used the express the height as a function of the width. Effectively, the dummy element enforces the aspect ratio.

Now, the CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

A working example can be seen here.

Why does this work?

• display:inline-block gives the container a shrink-to-fit box.
• position:relative gives the container a position box. The position box acts as the containing block of the inner elements. (Note: Using position:absolute would give the element a shrink-to-fit box that would act as the containing block of the inner elements.)
• width:50% gives the box of the container a width that will be used for the aspect ratio. The width can be specified as a length or as a percentage.
• margin-top:75% gives the box of the dummy element a height that is 75% of the aforementioned width, thus defining the aspect ratio. The key here is that a percentage value for margin-top or margin-bottom (or for padding-top or padding-bottom, for that matter) refers to the width of the containing block. Because the container is an inline-level block container, the height of the container is automatically computed as the height of the dummy element, which is based on the width of the container. Voilà, instant aspect ratio using only CSS.
• position:absolute removes the element from the normal flow inside the container, allowing the dummy element to dictate the sizing of the container.
• top/bottom/left/right:0 stretches the element to the edges of the container, which are determined by the aspect ratio as per the above. The element will thus receive all user events. Set margin/border/padding to taste.

I have tested this on the latest versions of Google Chrome, Firefox, Safari, and Opera as of this writing, with no apparent hangups.