How to style the DIV to display html controls - html

Question

I have the following HTML:
<div class="dispLoginSearch" style="text-align: left; overflow: hidden;"> <!-- LOGIN AND SEARCH -->
<div class="theLoginBox" style="clear: both;">
<div class="loginTitle">
Log in to <span style="font-family: 'blackjarregular'; font-size: 14pt; color: #FE7816;">My</span> <span style="font-family: 'trajanpro'; font-size: 12pt; color: #00529B;">WD</span> | Sign Up
<br />
<input type="text" value="Username" /> <input type="password" value="Password" /> <input type="button" value="Go" />
<br />
<span style="float: right;">Forgot login/password</span>
</div>
</div>
<div style="z-index: 99999999999;">
<input type="text" value="Search WD" />
</div>
</div> <!-- LOGIN AND SEARCH -->
CSS:
.dispLoginSearch
{
width: 47%;
height: 150px;
line-height: 150px;
vertical-align: middle;
float: right;
padding-right: 2%;
background: #FFFFFF;
border: 1px solid #0026ff;
}
.theLoginBox
{
border: 2px solid #D5D5D5;
border-radius: 4px;
width: 97%;
height: 90px;
padding: 10px;
white-space: nowrap;
background: #ff6a00;
}
.loginTitle
{
height: 88px;
display: block;
vertical-align: top;
white-space: nowrap;
font-weight: bold;
text-align: left;
background: #b6ff00;
}
When I view the website, I see the following:
What I would like it be shown:
How do I fix the issue? It is happening in both IE and other browsers.
UPDATE:
I added overflow: auto in the loginTitle class and this is what is shown:
Each section is taking up a lot of space and showing the scrollbar :/

Answer 1

This is because of line 5 of your CSS : line-height: 150px;.
Just remove it and you should be fine.

Answer 2

If you want it to look like image you attached, see here: http://codepen.io/anon/pen/FothH
html:
<form action="#">
<p>Log in to ###### | Sign up</p>
<input type="text" placeholder="Username"/>
<input type="password" placeholder="Password"/>
<input type="submit" value="Go"/>
Forgot login/password
</form>
css:
form {
border: 1px solid #d4d4d4;
display: block;
width: 375px;
font: 16px sans-serif;
padding: 0 0 0 15px;
border-radius: 5px;
-webkit-font-smoothing: antialiased;
}
form p {
margin: 5px 0 0;
font-size: 20px;
line-height: 35px;
}
input {
display: inline-block;
border-radius: 7px;
}
input[type=text], input[type=password] {
border: none;
background: #ebebeb;
font-size: 16px;
padding: 6px 10px;
width: 180px;
}
input[type=password] {
width: 120px;
}
input[type=submit] {
font-size: 16px;
width: 25px;
padding: 5px 0px;
background: none;
color: red;
border: none;
}
form a {
display: block;
line-height: 25px;
text-align: right;
margin-right: 30px;
color: #d4d4d4;
text-decoration: none;
margin-bottom: 5px;
}