I am trying to align some stuff in a login page. I want the pictures to appear left to the input boxes and the buttons on the down part of the div to be left and right. Something like this:
But this is what is happening (on Safari. Chrome works kinda OK as you can see on top image)
The problem is that although it partially works on Chrome, the input boxes are too small and I can't increase their size.
This is the code I am trying to use:
// Outer white DIV for the forms and buttons:
.login-form {
width: 360px;
height: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
}
// Login field for e-mail:
.login-field-up {
margin-bottom: 5px;
margin-top: 10px;
margin-right: 100px;
float: left;
display: inline-block;
}
/ Login field for password:
.login-field-down {
margin-top: 10px;
margin-bottom: 15px;
float: left;
}
// DIV for Icons of user credential and golden key:
.login-icon {
margin-top: 15px;
margin-right: 15px;
float: left;
display: inline-block;
}
// Right checbox:
.right-col {
float: right;
text-align: center;
margin-top: 10px;
}
Left blue login button:
.left-col {
float: left;
margin-left: 10px;
}
If there is any other easy way to do it, I am up to it. Since I have always worked with backend, I suck with CSS.
<section id="banner">
<h2>Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="login-icon">
<img src="{% static "icons/identity.png" %}" class="icons">
</div>
<div class="login-field-up">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-icon">
<img src="{% static "icons/key_user.png" %}" class="icons">
</div>
<div class="login-field-down">
<input type="password" name="password" id="username" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</form>
</div>
</section>
</section>
You can increase the size of your input boxes by setting the "font-size" attribute in your style sheet, for example,
input {
font-size:2em;
}
And you can align images with input boxes by using <label></label>, for example,
<label for="email"><img src="image.png" /></label>
<input type="email" placeholder="E-mail" name="email" />
Or, you can also place the images in a separate div and the inputs in another div and then adjust the width, margin or padding to align them the way you want.
But as Billy said, if you post your html code, it will be easier to provide a solution.
EDIT: Thanks for your code. I think you wanted to achieve something like this. I added some borders to help you understand the positioning of the divs. Remove them and change the urls for the images once you are done debugging.
<!DOCTYPE html>
<html>
<head>
<style>
.login-form {
width: 360px;
height: 300px;
margin-left: auto;
margin-right: auto;
padding: 19px 29px 29px 19px;
color: #444444;
background: rgba(253, 253, 253, 1.000);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: solid 1px rgba(144, 144, 144, 0.075);
border:1px solid black;
}
#title-header {
text-align:center;
}
#username, #password {
margin-left:20px;
}
input {
font-size:1em;
}
img {
width:16px;
height:16px;
}
.login-field-up {
margin-left:50px;
width:250px;
border:1px solid black;
}
.login-field-down {
margin-left:50px;
width:250px;
border:1px solid black;
margin-top:20px;
margin-bottom:20px;
}
.login-icon {
border:1px solid black;
}
.right-col {
float:left;
width:160px;
margin-left:30px;
border:1px solid black;
}
.left-col {
margin-left:50px;
float:left;
width:60px;
border:1px solid red;
}
.inner-wrapper {
margin-top:50px;
width:350px;
height:150px;
border:1px solid red;
}
</style>
<section id="banner">
<h2 id="title-header">Title</h2>
<section>
<div id="skel-layers-wrapper" class="login-form">
<form method="post" action="{% url 'principal' %}">
<div class="inner-wrapper">
<div class="login-field-up">
<img src="image.png">
<input type="text" name="username" id="username" placeholder="E-mail" />
</div>
<div class="login-field-down">
<img src="image.png">
<input type="password" name="password" id="password" placeholder="Password" />
</div>
<div class="left-col">
<input type="submit" value="Login!" class="button" />
</div>
<div class="right-col">
<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
</div>
</div>
</form>
</div>
</section>
</section>
Related
I want to put icon inside the input tag but its always in the bottom of input. i used bootstrap actually but for this i used custom style
here's the html:
<div class="form-group">
<label for="password" class="text-secondary">Password</label>
<div class="input-group">
<input id="password" type="password" class="form-login #error('password') is-invalid #enderror" name="password" required autocomplete="current-password">
<div class="input-group-append">
<span class="input-group-text" onclick="password_show_hide();">
<i class="fas fa-eye" id="show_eye"></i>
<i class="fas fa-eye-slash d-none" id="hide_eye"></i>
</span>
</div>
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
here's the css:
.form-login{
display: block;
width:100%;
font-size: 1rem;
font-weight: 400;
line-height:1.5;
border-color: #009DA9 !important;
border-style: solid !important;
border-width: 0 0 1px 0 !important;
padding: 0px !important;
color:black;
height: auto;
border-radius: 0;
background-color: #fff;
background-clip: padding-box;
}
.form-login:focus{
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: none;
}
what it's look like right now:
what i want to look like:
Well you can use position absolute to position the icon over the input.
You might need to change the top value a little bit and the padding-right value. Check the comment inside the snippet below
.input-group {
position:relative;
display:inline-block;
}
.input-group-text {
position: absolute;
right:0;
top: 0;
}
input {
padding-right: 20px; /* = icon width if you don't want the password to go under the icon */
}
<div class="input-group">
<input id="password" type="password" class="form-login" />
<div class="input-group-append">
<span class="input-group-text">
<i class="fas fa-eye" id="show_eye">icon</i>
</span>
</div>
</div>
You can use position absolute to position the icon over the input field. Check to code I posted below:
.form-group {
width: 50%;
position: relative;
}
.form-group i {
position: absolute;
right: 0px;
}
.icon {
padding: 10px 0px;
color: grey;
min-width: 5px;
text-align: center;
}
.input-field {
width: 100%;
padding: 10px;
border-radius: 10px;
border-color: solid lightgray;
}
<div class="form-group">
<label for="passowrd">Password</label>
<div class="input-set">
<i class="fas fa-lock icon">icon</i>
<input id="password" name="password" class="input-field" type="text" placeholder="password" />
</div>
</div>
I have a text that overflows from its own background, when it reaches this size it stays like this:
I want the font to be smaller and don't overflow so it looks nice but I can't make it work. I tried putting a fixed width and it didn't work, also I wrote an "!important" and it didn't make a difference but when I use another CSS rules for other content it works after that so I guess the code is working.
The stylesheets are well related:
Máster en CSS
This is the HTML of the aside:
<aside id="lateralBar" class="clearfix">
<h3>
Buscar
</h3>
<div id="search">
<form action="#">
<input type="text">
<input type="button" value="L" class="icon">
</form>
</div>
<h3>
Login
</h3>
<div id="login" class="lateralBox">
<form action="">
<label id="user" class="icon">U</label>
<input type="email">
<label id="password" class="icon">w</label>
<input type="password">
<input type="submit" value="Entrar">
<input type="reset" value="Limpiar">
Registrate aquí
¿Has olvidado tu contraseña?
</form>
</div>
<h3>
Redes sociales
</h3>
<div id="socialNetwork" class="lateralBox">
<div class="twitter">
t
<p class="overlay">
Twitter
</p>
</div>
<div class="facebook">
f
<p class="overlay">
Facebook
</p>
</div>
<div class="youtube">
y
<p class="overlay">
Youtube
</p>
</div>
</div>
<h3>
Patrocinadores
</h3>
<div id="sponsors" class="lateralBox">
</div>
</aside>
The normal CSS:
#lateralBar {
width: 300px;
min-height: 1200px;
font-family: "TrebuchetMS";
float: right;
margin: 20px;
margin-right: 82px;
}
#lateralBar h3 {
display: block;
width: auto;
height: 45px;
line-height: 49px;
background: url("../img/pxgray.png"), white;
box-shadow: 0px 1px 0px #393d3f, 1px 2px 0px #393d3f, 2px 3px 0px #393d3f, 3px 4px 0px #393d3f;
font-size: 30px;
font-family: "BebasNeue";
font-weight: normal;
letter-spacing: 2px;
padding-left: 15px;
margin-top: 30px;
margin-bottom: 15px;
}
#lateralBar h3:first-child {
margin-top: 0px;
}
The responsive CSS:
#media (max-width: 899){
#lateralBar {
margin-left: 100px;
}
#lateralBar h3 {
font-size: 10px;
}
}
The issue stands on the way you defined your media.
Try adding 'px' on your max-width and that should work:
#media (max-width: 899px){ .. }
my overall goal is to have different inputs inline which when clicked show a section. I try to rely solely on CSS in this case. Until now it worked quite good; however since the input is wrapped into several other divs the section remains not displayed even when input is checked.
I tried different approaches in CSS to overcome the wrappers around the input... none were successful.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked + .labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}
<main>
<div class="profile_overview">
<div class="profile_one">
<input id="tab1" type="radio" name="tabs" value="a" />
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<input id="tab2" type="radio" name="tabs" value="b" />
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<input id="tab3" type="radio" name="tabs" value="c" />
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<input id="tab4" type="radio" name="tabs" value="d" />
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>
Since there is no parent's selector in CSS, your inputs have to be ahead in the code and sibblings for the closest position.
you have well linked your labels and inputs via the id and for attributes, you need to place your input as first children inside the parent container or just ahead where your content boxes are.
Your CSS selectors will then work fine.
main {
min-width: 320px;
max-width: 100%;
height: auto;
padding: 20px;
margin: 0 auto;
}
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #f3f3f3;
}
#tab1,
#tab2,
#tab3,
#tab4 {
display: none;
}
.profile_overview {
margin-top: 2%;
width: 100%;
height: 40vh;
display: flex;
justify-content: space-between;
}
.profile_one,
.profile_two,
.profile_three,
.profile_four {
width: 22.5%;
height: 100%;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.labeltab {
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
.labeltab:before {
font-weight: lighter;
margin-right: 10px;
}
.labeltab:hover {
color: white;
cursor: pointer;
}
input:checked+.labeltab {
color: white;
border: 1px solid #f3f3f3;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
<main>
<!-- here is the HTML update structure to use the ::checked state to toggle display on next sibblings -->
<input id="tab1" type="radio" name="tabs" value="a" />
<input id="tab2" type="radio" name="tabs" value="b" />
<input id="tab3" type="radio" name="tabs" value="c" />
<input id="tab4" type="radio" name="tabs" value="d" />
<!-- end update -->
<div class="profile_overview">
<div class="profile_one">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab1">A</label>
</div>
<div class="profile_two">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab2">B</label>
</div>
<div class="profile_three">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab3">C</label>
</div>
<div class="profile_four">
<!-- input moved two level up in html tree -->
<label class="labeltab" for="tab4">D</label>
</div>
</div>
<section id="content1">
<p>1</p>
</section>
<section id="content2">
<p>2</p>
</section>
<section id="content3">
<p>3</p>
</section>
<section id="content4">
<p>4</p>
</section>
</main>
I have a pure CSS image script I use with my eBay listings, I'm changing the design of my template at the moment and have run into a major snag with the code, it seems that the large image can only be displayed directly below the thumbnail radio buttons, but I want to have the large image being displayed in a different table cell..
I don't know a great deal about CSS, so hopefully someone will know an easy fix? here's hoping..
<style type="text/css">
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #1F7AB6;
box-shadow: 2px 2px 7px #d0d0d0;
}
label {
margin: 0px 5px 0px 0px;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
}
</style>
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td></tr></table>
I need to rewrite it so that I can put the large image anywhere
throughout the template and still be able to have the small thumbnails
change it when they're clicked.
Well if this is the case then you can experiment with the positioning.
On the other hand you can imitate the table behavior with display: table and td with display: table-cell to get you closer to the desired result.
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
div.Image1BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 110px 92px; }
div.Image2BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 110px 92px; }
div.Image3BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 110px 92px; }
div.Image4BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image5BlockS { width:110px; height:92px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 110px 92px; }
div.Image1BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image1_zpsus8mlxre.jpg'); background-size: 600px 500px; }
div.Image2BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image2_zpsetwycsgp.jpg'); background-size: 600px 500px; }
div.Image3BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image3_zpsxtx5woeg.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image4BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
div.Image5BlockB { width:600px; height:500px; background-image:url('https://i1066.photobucket.com/albums/u409/magneato1/image4_zpsixuqksa5.jpg'); background-size: 600px 500px; }
#table {
display: table; /* imitates the table behavior */
border: 1px solid;
border: 1px outset grey;
padding: 1px;
}
.table-cell {
margin: 1;
border: thin inset grey;
display: table-cell;
}
section {
display: none;
}
input {
display: none;
}
label {
display: inline-block;
font-weight: 600;
color: #bbb;
border: 1px solid transparent;
}
label:hover {
cursor: hand;
border: 1px solid #eee;
box-shadow: 1px 1px 5px #000;
}
label {
margin: 0 5px 0 0;
}
input:checked + label {
border: 1px solid #155179;
box-shadow: 2px 2px 7px #c0c0c0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: table-cell; /* imitates the td behavior */
border: thin inset grey;
margin: 1;
}
<div id="table">
<tr>
<td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<div class="table-cell">
2nd cell
</div>
<td>
3rd cell with the td element but without the border which doesn't work if there's no table element
</td>
<div class="table-cell">
4th cell
</div>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</tr>
</div>
This is essentially what I want to do, but putting the large image elements into another cell breaks it, the large image no longer shows up, I need to rewrite it so that I can put the large image anywhere throughout the template and still be able to have the small thumbnails change it when they're clicked on.
<table border=1><tr><td>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><div class="Image1BlockS"></div></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><div class="Image2BlockS"></div></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><div class="Image3BlockS"></div></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><div class="Image4BlockS"></div></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><div class="Image5BlockS"></div></label>
</td>
<td>
<section id="content1">
<div class="Image1BlockB"></div>
</section>
<section id="content2">
<div class="Image2BlockB"></div>
</section>
<section id="content3">
<div class="Image3BlockB"></div>
</section>
<section id="content4">
<div class="Image4BlockB"></div>
</section>
<section id="content5">
<div class="Image5BlockB"></div>
</section>
</td>
</tr></table>
http://jsfiddle.net/9FG4f/4/
I tried a different way to line up the labels and textfields in the form area along with the button horizontally, but the email label and txtfield is not aligned perfectly.
HTML
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname">
<label class="nick-3">Full Name:</label>
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email">
<label class="nick-4">Email Address:</label>
<input type="text" class="email2" name="email">
</div>
<div id="action3-button">
<input type="submit" class="btn2" value="JOIN NOW" name="submit">
</div>
</form>
</div>
CSS
#action3-fname {
display:inline-block;
}
#action3-email {
display:inline-block;
}
#action3-button {
display:inline-block;
}
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
float:left;
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
margin-top: -8px;
padding: 4px;
width: 210px;
}
.action3 .nick-3 {
color:#000000;
}
.action3 .nick-4 {
margin-left:23px;
color:#000000;
}
.action3 .btn2 {
background: none repeat scroll 0 0 #ff8400;
border: medium none;
border-radius: 5px;
color: #FFFFFF;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 40px;
margin-bottom: 15px;
text-align: center;
width: 140px;
margin-left:10px;
}
I'd get rid of the floats and the margin-tops. Like so:
.action3 .email2 {
border: thin #999 solid;
border-radius: 5px;
height: 22px;
margin-left: 22px;
padding: 4px;
width: 210px;
}
Here's a fiddle: http://jsfiddle.net/disinfor/9FG4f/8/
EDIT
Updated with fiddle that closes all tags correctly and combines the first three lines of CSS into a class.
.actionClass {
display:inline-block;
}
<div class="prefill2">
<h1>Need a Real Estate Expert?</h1>
<form class="action3" name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<div id="action3-fname" class="actionClass">
<label class="nick-3">Full Name:</label><br />
<input type="text" class="name2" name="full_name" />
</div>
<div id="action3-email" class="actionClass">
<label class="nick-4">Email Address:</label><br />
<input type="text" class="email2" name="email" />
</div>
<div id="action3-button" class="actionClass">
<input type="submit" class="btn2" value="JOIN NOW" name="submit" />
</div>
</form>
</div>
Get rid of the <br>, get rid of the float's and it should all line up nicely.
.action3 .name2 {
border:thin #999 solid;
border-radius:5px;
/* float:left; <-- remove this */
height:22px;
margin-bottom:10px;
margin-left: 1px;
margin-top: 8px;
padding: 4px;
width: 210px;
}
Here is your updated fiddle
I actually made them float left and corrected a couple margins. Button and everything lined up together.
Here's my updated fiddle
#action3-fname {
float:left;
}
#action3-email {
float:left;
}