How to align this text in CSS?


Tags: css,jsf

Problem :

I am having a really annoying problem in css. I am trying to align all the text for the input fields in a form (code shown below). For some reason the text that is two words long is kicking on to a second line(for example "First Name" below). Can anyone help me to get it to appear on one line because I've tried changing a lot of things and its just not working for me. Here is the code for the form (in JSF) and also I have attached the relevent CSS code. Thanks

## JSF ##
    <div class="register"><h:form id="registerForm">
    <div class="white"><h2>Add Business Account</h2></div>
    <h:messages errorClass="errorMessage" infoClass="infoMessage"
        warnClass="warnMessage"></h:messages>
    <table>
        <tr>
            <td><h:outputLabel for="firstName">
                    <h:outputText class="generaltext" id="firstNameLabel" value="First Name" />
                </h:outputLabel></td>
            <td><div class="inputboxpadding"><h:inputText class="inputboxes" id="firstName"
                    value="#{registerBean.businessAccount.firstName}" size="20" required="true" 
                    requiredMessage="Required field" validatorMessage="First name must contain between 3 and 15 characters">
                    <f:validateLength minimum="3" maximum="15"/>
                    <f:ajax event="blur" render="fnamemessage" /></h:inputText>
                    </div></td>
                    <td> <div class="validationbox"><h:message id="fnamemessage" for="firstName" class="validation"/></div></td>
        </tr>
        <tr>
            </h:commandButton></div></td>
        </tr>
    </table>
    <h:link value="Back to login" outcome="login" />
</h:form></div>


## CSS ##
.register {
font-family: Arial, Helvetica, sans-serif;
background-color: #6495ED;
width: 500px;
height:auto;
min-height:700px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: auto;
border-style: solid;
border-width: 1px;
border-radius: 20px;
padding: 100;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}

.generaltext{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight:bold;
color: white;
padding-left:20px;
padding-right:20px; 
}


Solution :

Try specifying width for the div of the inputbox


    CSS Howto..

    how is Zurb's Foundation Menu button coded?

    How to fix this arrow shape created using CSS in IE9

    How can I make my div to remain fixed and no longer change position?

    How to add CSS for dynamic MenuItems in MenuList and How to get the value of the MenuItem in XUL

    How do I prevent jQuery from resetting all my CSS?

    Using CSS, how do I change the font color of parent
  • tag if child
  • tag is hovered over
  • How to remove blue underline on text in Chrome - CSS?

    How to set CSS rule for a DIV in a LI of class UL?

    how to make the images always in center

    How can I get rid of those animation in jquery toggle?

    There is a little gap between the image and the overlay, I do not know how to fix it [duplicate]

    How to remove border (outline) around text/input boxes? (Chrome) [duplicate]

    How do I center elements on a page using percentage widths?

    How to properly display content when I resize the window?

    Foundation 6: How to set .is-open-right translateX value with JavaScript

    Rails - how to get absolute url of an asset in css.erb

    How to set content area div height with dynamic header div

    How to use fadeTo, etc. animation tags along with a css change statement in jquery?

    Space on Navigation right and left…how to remove it?

    How to give a css code for combined classes in HTML [duplicate]

    How to Auto set the height of a div using the height of another div

    How do I limit the number of cells on a row in CSS

    How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

    How can I change styling and test for every page reload [closed]

    How to use CSS to center the buttons?

    How to do a best fit vertical align

    How can i get bootstrap to alter page CSS instead of lay dormant?

    how to make a div transparent without affecting the child in CSS 3?

    how change css href to all .html documents with button click?

    how to override the specific style of spans in a div [span in a span ] using css or jquery?