Home/ Questions/Q 7034497
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:11:35+00:00

I have a large number for forms with submit buttons and I need to

  • 0

I have a large number for forms with submit buttons and I need to right align the buttons. The problem is that when I use float: right, the submit element is taken out of the normal document flow. This means the form’s height is reduced and it’s bottom border then interferes with the button.

Here’s the code:

<html>
<head>
    <style type="text/css">
        #left-col {
            width: 290px;
        }
        #loginForm {
            border: 1px solid black;
        }   
        #submit {
            /* float: right; */
        }

    </style>
</head>
<body>
    <div id="left-col">
        <div id="loginForm">
            <form id="user-login-form" enctype="application/x-www-form-urlencoded" method="post" action="">
                <label for="email" class="required">Email</label>
                <input type="text" name="email" id="email" value="">
                <label for="password" class="required">Password</label>
                <input type="password" name="password" id="password" value="">
                <input type="submit" name="submit" id="submit" value="Login" class="submit">
            </form>
        </div>
    </div>
</body>
</html>

The forms are generated programatically (using Zend_Form) so I am hoping to avoid hacks that require additional elements (such as paragraphs with clear: both).

Hopefully this will be a simple question for a CSS guru!

Thanks…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use the CSS :after pseudoelement to clear the container, without adding any extra HTML markup.

    You would add something like this to your CSS:

    #loginForm:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

    Or to the form element, whichever you deem more appropriate.

    • 0