CODEWITHSUNDEEP
htmlcss
Jeffrey Aylesworth
Jeffrey Aylesworth

Reputation: 8510

Make two fieldsets the same height

I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).

Is there any way to make these fieldsets both the same height without setting a fixed height?

I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?

Also, would it then be possible to make the content of the fieldsets position centred vertically?

I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.

Thanks

Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html

Upvotes: 3

Views: 15299

Answers (3)

Roggo
Roggo

Reputation: 169

I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).

<table>
  <tr>
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
      <td style="vertical-align:top">
           <fieldset></fieldset>   
      </td>   
  </tr>
</table>

Upvotes: 3

David Thomas
David Thomas

Reputation: 253416

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. =)

Upvotes: 1

rlb.usa
rlb.usa

Reputation: 15041

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

Upvotes: 3

Related Questions