Question

I been messing around with the css but i cannot get the layout I want..
I want to make all the input fields vertically aligned but its important that i still keep the dividers (since i use javascript on them)
I been playing around with different positions and float settings and i cannot seem to get it to work…

If somebody has a nice solution that will make it all vertically align (with labels directly on top of the input fields) I would really appreciate it

here is my messy code:

http://jsfiddle.net/hYa9a/4/

Answer 1

An alternative to Nightfirecat’s suggestion, if the plan is to get the labels above the text box, then this might do the trick:

BTW: I think there’s a typo in the jsfiddle.net/hYa9a/4/ code. In the password field one of the IDs is entered as usernameIn. Was this supposed to be passwordIn?

<style>
#optionsBar{ /*same as login*/}
.placeholder {
    background-color: #fff;
    outline: none;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    text-indent: 0;
    /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 8px rgba(82, 168, 236, 0.6); */
    -moz-border-radius: 2px;
    border-radius: 2px;
}
/*same as login*/
.selectInput {
    border: 1px solid #8BAAFE;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07) inset, 0 0 5px rgba(33, 93, 253, 0.6);
}    

#smLogin{
position:relative;
float:right;
width:100%;
height:30px;
}

#usernameIn{
    position: relative;
    float: left;
    width:150px;
    margin-left:-150px;
    margin-top:20px;
}
#passwordIn{
    position: relative;
    float: left;
    width:150px;
    margin-left:-150px;
    margin-top:20px;
}
#username{
    width:150px;
    position: relative;
    float: left;
}
#password{
    position: relative;
    float: left;
    width:150px;
}
#firstInput{
    position: relative;
    float: left;
}
#secondInput{
position: relative;
    float: left;
}
​</style>

<div id="optionsBar">
<div id="smLogin">
<form name="smLoginForm">

<div id="username" >
<label id="usernameLb"  for="username">Username</label>
</div>
<div id="usernameIn" class="inputs">
 <input id="firstInput" name="username"  class="placeholder controlInput"   type="text" size="20" value="">
</div>

<div id="password" >
 <label id="passwordLb" for="password">Password</label>
</div>
<div id="passwordIn" class="inputs">
 <input id="secondInput" name="password" class="placeholder controlInput" type="password" size="20" value="">
</div>

</form>
</div>
</div>​

NB: If there was an option to modify the HTML code and not just the CSS, I would have suggested placing your form label and text box in a wrapper div. Something like:

<div class="formobject">
<div id="username" >
<label id="usernameLb"  for="username">Username</label>
</div>
<div id="usernameIn" class="inputs">
 <input id="firstInput" name="username"  class="placeholder controlInput"   type="text" size="20" value="">
</div>
</div>

Then you could clean up the CSS by removing all the styles on the individual labels and text boxes and set the width and floating to only the formobject div instead. Like:

<style>
.formobject{
    float: left;
    width:150px;
}
</style>