CODEWITHSUNDEEP
cssbuttonhtmlalignment
Steve
Steve

Reputation: 2818

CSS: Lining Up Buttons Horizontally In A Div Where One Of Them Is In A Form

I have a JSP page where there is a row of buttons in their own div at the bottom of a page. The button at the far left belongs to a form whose end tag, overlaps the start of the button_bar div. The button at the far right has its own self contained form.

The buttons line up horizontally, as I like, when I save the JSP as an HTML page ( complete, with css files, etc ). However, when the content is in a JSP the bottons don't line up horizontally.

Is there anything with CSS I can do to get around this.

The button div:

<div class="button_bar">


        <div class="button_bar_left_button">     
            <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
        </div>

</form><!-- end form 'f', main form -->    

    <div class="button_bar_left_button">     
        <input value="Start New Search" onclick="location.href='search'" name="buttonSearch" type="button">
    </div>


        <div class="button_bar_right_button">
            <form action="initialRequest" method="post">
                <input name="NextRequest" value="Add Member" type="hidden">
                <input "buttonaddmember"="" value="Add Member" type="submit">
            </form>       
        </div>




</div><!-- end div button_bar -->

The CSS from my style sheet:

/* horizontal button bar */
.button_bar
{
    margin-left:auto;
    margin-right:auto;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-bottom: 2%;
    width:100%;
    height:auto;
    vertical-align:top;
}

/* put a button on the far right of the above button bar */
.button_bar_right_button
{
    float:right;
    margin-left:1%;
    vertical-align:top;
}
/* put a button on the far left of the above button bar */
.button_bar_left_button
{
    float:left;
    margin-left:1%;
    vertical-align:top;
}

Answer

MODs steveax's comment below helped me solve this problem. He mentioned that some browsers will insert tags to balance a mistake I was doing. That led me to making changes that solved the problem. I would like to accept his second comment ( first comment under the first proposed answer ) as the asnwer.

I moved my form closing tag below the div for the buttons. I also moved the "Add Member" form outside of all of that and changed the "Add Member" button to a plain old button with a call to *.submit for that special form in the onclick. That solved it. I don't see a "accept comment as answer" link/button, but if there is I will give it to you. Thanks much. – Steve just now edit

Upvotes: 0

Views: 2244

Answers (2)

steveax
steveax

Reputation: 17743

There are HTML errors that that will lead to unpredictable rendering, viz:

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</form><!-- end form 'f', main form -->  
[...]
</div><!-- end div button_bar -->

The browser will correct this error to get a DOM that makes sense by closing the button_bar div before the closing <form> tag:

<form><!-- Opening form tag somewhere above -->
[...]
<div class="button_bar">
    <div class="button_bar_left_button">     
        <input value="Request More Informtion" name="buttonRequestMoreInformation" type="submit">
    </div>
</div><!-- Browser will likely insert a closing tag for .button_bar here to correct the error -->
</form><!-- end form 'f', main form -->  
[...]
<!-- This closing div tag will now be "extra" -->
</div><!-- end div button_bar -->

Upvotes: 0

Christopher Marshall
Christopher Marshall

Reputation: 10736

I removed a piece of your input "buttonaddmember"="" as it's not valid. Seems to be horizontally aligned now. Not sure if you intended that.

<input "buttonaddmember"="" value="Add Member" type="submit">

http://jsfiddle.net/6MXuZ/

Or add position:relative on your button_bar div, then absolutely position the buttons.

Upvotes: 1

Related Questions