Question

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.

Answer 1

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