CODEWITHSUNDEEP
html
user1072337
user1072337

Reputation: 12945

Positioning Two Adjacent Textboxes

I have a web page, and I am trying to set up a login section: I am trying to have two form input boxes next to each other (for email and login information), however, I am also using CSS to customize the boxes. When I use the code I currently have, the boxes appear in different rows, as opposed to the same row.

Here is the relevant code:

index.html:

<div class="loginwrap">
    <div class="logincontent_wrap">
    <div class="logincontent">
    <div class="loginaction">
    <form action="/" method="post" class="invite_form" autocomplete="off">
        <div class="logininput_row">
            <input type="text" class="logininput" value="" name="loginemail" id="loginemail"/>
            <span class="logininput_overlay">Account email</span>
        </div>
        <div class="logininput_row">
            <input type="password" class="logininput" value="" name="loginpassword" id="loginpassword"/>
            <span class="logininput_overlay">Password</span>
        </div>

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

CSS file:

    .loginwrap {
    margin: 0 auto;
    width: 900px;
}
.logincontent_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/
    padding: 5px;
    width: 100%;
}
.logincontent {
    background: none repeat scroll 0 0 #FFFFFF;
    overflow: hidden;
    padding: 0px;
}

.logincontent .loginaction {
    float: right;
    width: 400px;
}
.logincontent .loginaction_text {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
}
.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    position: relative;
    width: 140px;
}
.logincontent .loginbutton_row {
    margin: 8px 0;
}
.logincontent .logininput, .logincontent .logininput_overlay {
    color: #777777;
    font-size: 12px;
    font-weight: bold;
}
.logincontent .logininput.error {
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border: 1px solid #EE5F5B;
}
.logincontent .logininput_overlay {
    left: 11px;
    position: absolute;
    top: 10px;
    z-index: 0;
}
.logincontent .logininput_overlay.focus {
    color: #CCCCCC;
}
.logincontent .logininput {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #BBBBBB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    line-height: 14px;
    margin: 0;
    padding: 9px 9px 8px;
    position: relative;
    width: 140px;
    z-index: 1;
}

I know that the div command will make another row, but I don't know the other command to include the class information from the CSS file and have the boxes appear next to each other. Thank you for your help.

Upvotes: 0

Views: 3293

Answers (5)

Mike S.
Mike S.

Reputation: 2111

div is a block element thats mean it will have own line.

use in css 

logininput_row{display: inline}

or write both inputs into one div, or use mentioned floating

Upvotes: 2

Philip
Philip

Reputation: 4592

.logininput_row
{
   display:inline-block
   margin:0 5px;
   padding:5px;
}
.logininput_row input
{
   vertical-align:middle;
}

Upvotes: 0

Jared Farrish
Jared Farrish

Reputation: 49208

This positions the elements next to each other. Note, however, I removed your position: relative and position: absolute styles, as they are causing issues and probably not necessary. If you want to have Account Email and Password to show as field hints, there are better ways than what you're doing. For instance, HTML5's placeholder is a decent alternative:

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

.loginwrap {
    margin: 0 auto;
    width: 900px;
}
.logincontent_wrap {
    background: none repeat scroll 0 0 #FFFFFF;
    /*box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);*/
    padding: 5px;
    width: 100%;
}
.logincontent {
    background: none repeat scroll 0 0 #FFFFFF;
    overflow: hidden;
    padding: 0px;
}

.logincontent .loginaction {
    float: right;
    width: 400px;
}
.logincontent .loginaction_text {
    color: #555555;
    font-size: 14px;
    font-weight: bold;
}
.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    width: 140px;
    margin: 8px 0;
    float: left;
}
.logincontent .logininput, .logincontent .logininput_overlay {
    color: #777777;
    font-size: 12px;
    font-weight: bold;
}
.logincontent .logininput.error {
    -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border: 1px solid #EE5F5B;
}
.logincontent .logininput_overlay {
    /*left: 11px;
    position: absolute;
    top: 10px;
    z-index: 0;*/
}
.logincontent .logininput_overlay.focus {
    color: #CCCCCC;
}
.logincontent .logininput {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #BBBBBB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    line-height: 14px;
    margin: 0;
    padding: 9px 9px 8px;
    width: 140px;
}

http://jsfiddle.net/mNmgk/2/

Upvotes: 0

Michiel
Michiel

Reputation: 2634

Like Mike S. says you can change the display from block to inline. Another way would be to change the positioning by floating the element.

.logincontent .logininput_row {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 4px 0;
    position: relative;
    width: 180px;
    float: left;
}

Upvotes: 0

BeaverProj
BeaverProj

Reputation: 2215

Not sure about the width, but float: left should work...

.logininput_row {
  float:left;
}

Upvotes: 1

Related Questions