im coding up a HTML form just now and i havinfg a little trouble aligning the comments field to the right of the text fields.
I have 3 text fields uunder each other and i want to have the comments text fields align to the right of them, ive tried floating it it right and then giving it a negative top pargin to move it up inline but the the text i want about saying ‘comments’ isnt floating with the text fields as it doesnt have a class
is there an easier way to do this?
<style type="text/css">
![enter image description here][1]<!--
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
float:right;
margin-top:-80px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
Comments<textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
</form>
</div><!-- close form -->
Here’s what im trying to achieve
[1]: https://i.stack.imgur.com/g3yO8.png VIEW IMAGE
You could create two divs to hold the other elements and arrange them to be side by side.
You could use a table and join cells to hold the comment section.