How do I float 3 elements right above each other and one left?

Question

I want to align the 3 input elements on the right, above each other. And the textarea on the left. Just like this: http://cl.ly/Gvzo How do I make it work?

<div id="contact">
<form action="php/contact/contactengine.php" method="post">
<fieldset>

<input id="Name" name="Name" placeholder="Enter your full name" type="text">                        

<input id="Email" name="Email" placeholder="Enter your email address" type="email">
                    
<input type="submit" name="submit" value="Send your message">                              

<textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>

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

My CSS:

contact {

width: 670px;

}

input {

float:right;
width: 251px; 
height: 50px; 
padding: 0px 20px 0px 20px; 
margin: 0 0 20px 0;   
background: #fcfcfc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d6d6d6;
box-shadow:inset 0 0 4px #d6d6d6;
-moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
-webkit-box-shadow: inset 0 0 4px #d6d6d6;
font-size: 13px; 
font-weight:bold; 
color: #2a2a2a;  

}

textarea {

float:left;
width: 251px; 
height: 170px; 
padding: 12px 20px 12px 20px; 
margin: 0px; 
background: #fcfcfc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d6d6d6;
box-shadow:inset 0 0 4px #d6d6d6;
-moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
-webkit-box-shadow: inset 0 0 4px #d6d6d6;
font-size: 13px;
font-weight:bold; 
color: #2a2a2a;  
resize:none;

}

input[type=submit] {

float:right;
border:none;
font-size:16px;
width: 293px; height: 51px;
float: right; 
padding: 7px 20px 10px 10px; 
margin:0px;
background: url(../../img/contactsendbutton.png) no-repeat;
cursor: pointer;
color:#fff;
text-shadow:1px 1px 1px #000;

}

Answer 1

I edited this answer because it wasn't entirely accurate. First of all, the way you identify a div by its ID in CSS is by placing a '#'-character in front of it.

The order in which you place your elements is relevant when using float. When you first create the elements on the right, they are placed next to eachother, starting from the right, until it doesn't fit. In this case (since the left textarea hasn't been created) it stops when it reaches the other side of the div that contains it.

If you create the left textarea first, the right floating elements can't be placed next to each other, so they will be placed underneath each other.

You always have to keep in mind the margin, width and the width of its parent.

In code it should be a little like this: HTML:

<div id="contact">
        <form action="php/contact/contactengine.php" method="post">
            <fieldset>

                    <textarea id="message" name="Message" placeholder="What's on your mind?"></textarea>

                    <input id="Name" name="Name" placeholder="Enter your full name" type="text">                        

                    <input id="Email" name="Email" placeholder="Enter your email address" type="email">

                    <input type="submit" name="submit" value="Send your message">



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

CSS:

  #contact {
        width: 670px;
        }

        input {
        float:right;
        width: 251px; 
        height: 50px; 
        padding: 0px 20px 0px 20px; 
        margin: 10px;   
        background: #fcfcfc;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border:1px solid #d6d6d6;
        box-shadow:inset 0 0 4px #d6d6d6;
        -moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
        -webkit-box-shadow: inset 0 0 4px #d6d6d6;
        font-size: 13px; 
        font-weight:bold; 
        color: #2a2a2a;  
        }

        textarea {

        float:left;
        width: 251px; 
        height: 170px; 
        padding: 12px 0px 12px 20px; 
        margin: 10px; 
        background: #fcfcfc;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border:1px solid #d6d6d6;
        box-shadow:inset 0 0 4px #d6d6d6;
        -moz-box-shadow-inset: inset 0 0 4px #d6d6d6;
        -webkit-box-shadow: inset 0 0 4px #d6d6d6;
        font-size: 13px;
        font-weight:bold; 
        color: #2a2a2a;  
        resize:none;
        }

        input[type=submit] {

        float:right;
        border:none;
        font-size:16px;
        width: 251px; height: 50px;
        float: right; 
        padding: 7px 20px 10px 10px; 
        margin:10px;
        background: url(../../img/contactsendbutton.png) no-repeat;
        cursor: pointer;
        color:#fff;
        text-shadow:1px 1px 1px #000;
        }