CODEWITHSUNDEEP
htmlcssresponsive-design
Gezzamondo
Gezzamondo

Reputation: 1629

Aligning Form Fields and fixing for responsive layout

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 under each other and i want to have the comments text field aligned to the right of them, ive tried floating it right and then giving it a negative top margin to move it up inline but the label text which reads 'comments' isnt floating with the text fields as it doesnt have a class

Ive also tried separating them with 2 table cells but that doesnt help as when i want to view in mobile via the responsive layout i can move the comments field as it stuck in the table cell

Here's the example of the floated code i tried

    <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.sstatic.net/g3yO8.png VIEW IMAGE

Upvotes: 1

Views: 1758

Answers (2)

Ghost Answer
Ghost Answer

Reputation: 1498

I think your solution is this. Please try

<style type="text/css">
<!--
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:25px; margin-bottom:10px;  
border: 1px solid #d9e7f1;  }

.gezza-comments{ width:437px; height:300px;

margin-top:10px;
}

-->
</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" /><br/>
Comments<br/> <textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea>
</form>


</div><!-- close form -->

Upvotes: 0

user1004912
user1004912

Reputation: 106

Remove margin-top:-80; float:right from the comment box style and put the comment box inside a div, before the other fields of the form. Float the div to the right. See the sample code shown below:

<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;
    }

    -->
    </style></head>

    <body>


    <div id="form">

    <form action="" class="gezza-form" method="post" >
    <div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
    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" />

    </form>

It works in my pc and should work in mobile.

Upvotes: 1

Related Questions