CODEWITHSUNDEEP
htmlcssforms
quickblueblur
quickblueblur

Reputation: 286

Aligning Web Forms

I have two forms that I want to align. I was able to figure out how to align the height, but I can't get the width to work the way I want.

In my situation, I want the left box to fill in the remaining space. Using 'auto' just fills in the space to fit the contents. So instead of an expanding form, there is a gap between the two forms.

The reason I require this is I also have PHP around this form. There is a flag that dictates whether or not the second form shows up. So if there is only one form, I want it to expand the entire space. If there is two forms, I want them to share the space.

The way I thought of doing this would be to set the right form to a specific width and have the left form mold to whether or not anything else exists. I just can't figure out how to get the left form to expand itself without specifying an exact width.

I've included the HTML and CSS below as well as a JSFiddle reference.

HTML

<div class="section">
    <div class="container">
        <form>
           <fieldset class="left">
                <legend>PC Management</legend>
                <div>
                    <input type='submit' value='Backup' />
                    <input type='submit' value='Backup' />
                    <input type='submit' value='Backup' />
                </div>
           </fieldset>
        </form>
        <form>
          <fieldset class="right">
                <legend>PC Management</legend>
                <div>
                </div>
          </fieldset>
        </form>
    </div>
</div>

CSS

.section {
    margin: 0 auto;
    text-align: center
}
.container {
    height: 100px;
    width: 500px;
}
.container form, .container fieldset, .container input {
    height: 100%;
    display: inline;
}
.left {
    width: auto;
    float: left;
}
.right {
    width: 40%;
    float: right;
}

Upvotes: 1

Views: 182

Answers (1)

Sean Vieira
Sean Vieira

Reputation: 159945

display: flex will get you the dynamic resizing that you want without needing any JavaScript:

.section {
    margin: 0 auto;
    text-align: center
}
.container {
    height: 100px;
    width: 500px;
    display: flex;
}
.container form {
    flex: 1 1 auto;
}
.container form, .container fieldset, .container input {
    height: 100%;
}
<div class="section">
    <div class="container">
        <form class="left">
           <fieldset>
                <legend>PC Management</legend>
                <div>
                    <input type='submit' value='Backup' />
                    <input type='submit' value='Backup' />
                    <input type='submit' value='Backup' />
                </div>
           </fieldset>
        </form>
        <form class="right">
          <fieldset>
                <legend>PC Management</legend>
                <div>
                </div>
          </fieldset>
        </form>
    </div>
</div>

http://jsfiddle.net/eeLfx9d6/1/

Upvotes: 1

Related Questions