I currently have a set of input textboxes that I have attempted to align using CSS with the {width: xxx px;} property. However, this method is unreliable as it does not consistently ensure proper alignment.
<style>
#left_col p {
margin-top: 15px;
margin-bottom: 15px;
}
.notvis {
display: none;
margin-top: 5px;
margin-bottom: 5px;
}
#ws_doc_txt {
width: 350px;
}
#ws_end_txt {
width: 358px;
}
#ws_ns_txt {
width: 340px;
}
#ws_op_txt {
width: 25%;
}
#left_col {
float: left;
width: 480px;
padding: 0 0 0 0;
}
#right_col {
margin: 0 0 0 500px;
padding: 0 0 0 0;
text-align: left;
}
#textarea1 {
text-align: left;
}
#button1 {
margin-top: 20px;
margin-bottom: 20px;
}
.greentxt {
color: green;
}
.redtxt {
color: red;
}
</style>
</head>
<body>
<div id="left_col">
<p>
<label>
<input type="radio" name="ws_type" value="WSDL" id="ws_type_0">
WSDL</label>
<label>
<input type="radio" name="ws_type" value="NOWSDL" id="ws_type_1">
Endpoint</label>
</p>
<p id="ws_doc">
<label for="ws_doc">Document:</label>
<input type="text" name="ws_doc" id="ws_doc_txt">
</p>
<p id="ws_end">
<label for="ws_end">Endpoint:</label>
<input type="text" name="ws_end" id="ws_end_txt">
</p>
<p id="ws_ns">
<label for="ws_ns">Namespace:</label>
<input type="text" name="ws_ns" id="ws_ns_txt">
</p>
<p>
<label for="ws_op">Operation:</label>
<input type="text" name="ws_op" id="ws_op_txt">
</p>
<p>
<label for="ws_par">Parameter:</label>
<input type="text" name="ws_par" id="ws_par_txt">
</p>
<p>
<label for="ws_val">Value:</label>
<input type="text" name="ws_val" id="ws_val_txt">
</p>
<input type="submit" name="test" value="Test">
</div>
What alternative method would be more appropriate for ensuring the textboxes always stop at a specific point on the right side? Additionally, is it considered incorrect to use <p> tags to manipulate inputs into behaving like block elements? Would utilizing CSS to keep them aligned on separate lines be a better approach? Thank you