Positioning textBoxes in relations to each other

adamtrask used Ask the Experts™

Hello experts,

Assuming that I have 5 textboxes , placed in a row, next to each other, and the first textbox  has a width: 5% and is positioned at  Left:20%;

Can I use a style bloc to position the remaining 4 textBoxes so that each box would be positioned at specific distance from the one preceding it which would ensure they don’t overlap ?
I would appreciate an example illustrating how to accomplish the above. Thanks.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this - http://www.wickham43.supanet.com/tutorial/divboxes.html

Example 3 shows 3 boxes using relative positioning
Top Expert 2011

Do you mean something like this?

    <input type="text" name="textbox1" value="" style="left: 20px;position:absolute;">
    <input type="text" name="textbox2" value="" style="left: 170px;position:absolute;">
    <input type="text" name="textbox3" value="" style="left: 240px;position:absolute;">
    <input type="text" name="textbox4" value="" style="left: 390px;position:absolute;">
    <input type="text" name="textbox5" value="" style="left: 460px;position:absolute;">

Open in new window

I would use margins instead of position. Example below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.container-block {
	background-color: #CCC;
	width: 100%;
	margin-right: 20%;
	margin-left: 20%;
	height: 300px;
.left-block {
	background-color: #0FC;
	height: 100px;
	width: 100px;
	position: relative;
	left: 0px;
	float: left;
	margin-left: 20%;
.row-blocks {
	background-color: #0F6;
	float: left;
	height: 100px;
	width: 100px;
	margin-left: 5%;
	margin-top: 0%;
	margin-right: 0%;
	margin-bottom: 0%;

<div class="container-block">
  <div class="left-block">Content for  class "left-block"</div>
  <div class="row-blocks">Content for  class "row-blocks"</div>
  <div class="row-blocks">Content for  class "row-blocks"</div>
  <div class="row-blocks">Content for  class "row-blocks"</div>
  <div class="row-blocks">Content for  class "row-blocks"</div>


Open in new window


Thank you so much

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial