All geek questions in one place

Make two fields with the same height

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

Is there a way to make these fields with the same height without setting a fixed height?

I have an idea, what maybe I can do so that both have the maximum height of the parent and the minimum height of the car?

Also, would it be possible for the contents of the vertical positions to be vertical?

I don't care if he works with IE, but he needs to work with Firefox and Webkit, and if possible Opera.

thank

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

+3
source share
3 answers

You can put them in a parent container, such as a table or div, and have two children in height=100%.

The only two options are the ones you don't need, at a fixed height, for example height=59px, or you can do it through javascript.

For vertical positioning, you can paste them into a parent container, such as a table or div, and then click there vertical-align:center

+3
source

I'm a little late, but you can always use tables (they don’t like these, but well .. the 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>
+3
source

, js/jQuery, - css3 psuedo-element :nth-of-type(odd), , css .

height: 100% fieldset s, ( form), . , overflow-y: auto; , , , .

<!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>

: http://www.davidrhysthomas.co.uk/so/fieldsets.html.

, - , , . =)

+1

Source: https://habr.com/ru/post/1751279/

More articles:


All Articles