Question

I am designing a particular form that will have a fieldset on the left that is a tall as the three fieldsets on the right.

I created 3 jsfiddles with different approaches:

Hacked with <br>: http://jsfiddle.net/pdgreen/GjdRj/

CSS Sibling Selector : http://jsfiddle.net/pdgreen/GjdRj/1/

IDs: http://jsfiddle.net/pdgreen/GjdRj/3/

The <br> solution is to act as a strawman. It isn’t to be taken seriously. I like the CSS sibling selector solution because it doesn’t need anything special in the HTML, but it very quickly gets out of control in terms of complexity. Is using IDs the correct way? I guess it is the most straight forward, but it just doesn’t feel right. Is there a better way?

Answer 1

Why not use nth-child(n)? My fork of your jsFiddle

The basic idea is:

.container > fieldset.fsGroup:first-child {
height:20em;
}

.container > fieldset.fsGroup:nth-child(2) {
    height:5em;
}
...