ansaurus

Question

Answer 1

+2 A:

You can put them in a parent container like a table or div, and have the two children be at height=100%.

The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.

For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center

rlb.usa 2010-06-22 21:04:43

Neither of these worked; height:100%; made the boxes shorter than they were, and vertical-align:center changed nothing. Here's the content of the page, if it helps: https://dl.dropbox.com/u/2318402/SO/login.html Thanks

Jeffrey Aylesworth 2010-06-22 22:39:14

vertical-align: center will not do what you want it to do. http://phrogz.net/css/vertical-align/index.html

Austin Fitzpatrick 2010-06-22 22:44:21

Since there doesn't seem to be a suitable solution, I'll accept this answer.

Jeffrey Aylesworth 2010-08-20 21:01:57

Answer 2

A:

The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.

It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />

    <style type="text/css" media="all">

        form        {
                width: 50%;
                height: 200px;
                }

        fieldset    {
                width: 30%;
                height: 100%;
                margin: 0 1em 0 0;
                padding: 0.5em 1em;
                overflow-y: auto;
                }

        fieldset:nth-of-type(odd)
                {
                float: left;
                }

        label       {
                display: inline-block;
                width: 30%;
                }

        input[type=text]
                {
                display: inline-block;
                width: 50%;
                }

    </style>
</head>

<body>

    <div id="wrap">

        <form enctype="form/multipart" method="post" action="">
            <fieldset>
                <label for="one">Label 1</label><input id="one" name="one" type="text" />
                <label for="two">Label 2</label><input id="two" name="two" type="text" />
            </fieldset>

            <fieldset>
                <label for="three">Label 3</label><input id="three" name="three" type="text" />
                <label for="four">Label 4</label><input id="four" name="four" type="text" />
                <label for="five">Label 5</label><input id="five" name="five" type="text" />
                <label for="six">Label 6</label><input id="six" name="six" type="text" />
            </fieldset>
        </form>

    </div>

</body>

</html>

Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.

Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)

David Thomas 2010-06-22 23:03:18

You're using a fixed height? I'd like to avoid doing that

Jeffrey Aylesworth 2010-06-24 00:37:48

@Jeffrey Aylesworth, unfortunately for a child element to have a height measured in percent (the least restrictive way of ensuring siblings have equal height) the parent's height has to be specified. You could use JS to make the specified height more dynamic, though.

David Thomas 2010-06-24 06:39:13

ansaurus

tags:

views:

answers:

Make two fieldsets the same height

related questions