www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Need advice on simple positioning question

  1. #1
    Join Date
    Nov 2009
    Posts
    7

    resolved [RESOLVED] Need advice on simple positioning question

    I have a very simple "2 column" CSS form below. It displays labels down the "left column" and the data input fields down the "right column"

    If I wanted to add text, such as "The quick brown fox jumped over the lazy white dog", to be positioned directly adjacent and to the right of only the "file1Checkbox" field (which in this example this is the first CHECKBOX field) then what is the preferred CSS way to do so?

    Code:
    <html>
    <head>
    
    label, input {
    	display: block;
    	float: left;
    	width: 150px;
    	margin-bottom: 10px;
    	margin-right: auto;
    }
    label {
    	width: 110px;
    	text-align: right;
    	padding-right: 10px;
    	margin-top: 2px;
    }
    br {
    	clear: left;
    }
    </style>
    </head>
    <body>
    <form method="post" action="" >
    
    	<label for="firstname">First Name:</label>
    	<input type="text" name="firstname" id="firstname"/><br/>
    
    	<label for="lastname">Last Name:</label>
    	<input type="text" name="lastname" id="lastname"/><br/>
    
    	<label for="emailaddress">Email Address:</label>
    	<input type="text" name="emailaddress" id="emailaddress"/><br/>
    
    	<label for="file1">File 1 Upload:</label>
    	<input type="checkbox" name="file1Checkbox">The quick brown fox jumped over the lazy white dog.<br/>
    	<label for="file1label"></label>
    	<input type="file" name="file1" id="file1"/><br/>
    
    	<label for="file2">File 2 Upload:</label>
    	<input type="checkbox" name="file2Checkbox"><br/>
    	<label for="file2label"></label>
    	<input type="file" name="file2" id="file1"/><br/>
    	<button type="submit">Submit</button>
    </form>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    input[type="checkbox"] {width:auto; margin-left:70px;}
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2009
    Posts
    7
    Thanks, Fang. That did the trick.

    Here I was trying to define a style for the "The quick brown fox..." text itself, but you pointed out that I needed, instead, to affect the style of the checkbox field in front of it.

    Is there a simple rule of thumb for knowing how to approach these situations - i.e, whether to tweak the element itself or the element(s) before it?

  4. #4
    Join Date
    Nov 2009
    Posts
    7
    Quote Originally Posted by Fang View Post
    Code:
    input[type="checkbox"] {width:auto; margin-left:70px;}
    Fang, I spoke too soon. Adding this style for type="checkbox" works well for FF and Safari, but IE (at least IE7 and IE8) leaves the phrase "The quick brown fox..." over too far to the right of the checkbox - like it's trying to be in a third column that is to the right of the widest input fields.

    Any suggestions that would work for IE too?

    Here is the complete page to date:

    Code:
    <html>
    <head>
    
    label, input {
    	display: block;
    	float: left;
    	width: 150px;
    	margin-bottom: 10px;
    	margin-right: auto;
    }
    
    input[type="checkbox"] {width:auto; margin-left:70px;}
    label {
    	width: 110px;
    	text-align: right;
    	padding-right: 10px;
    	margin-top: 2px;
    }
    br {
    	clear: left;
    }
    </style>
    </head>
    <body>
    <form method="post" action="" >
    
    	<label for="firstname">First Name:</label>
    	<input type="text" name="firstname" id="firstname"/><br/>
    
    	<label for="lastname">Last Name:</label>
    	<input type="text" name="lastname" id="lastname"/><br/>
    
    	<label for="emailaddress">Email Address:</label>
    	<input type="text" name="emailaddress" id="emailaddress"/><br/>
    
    	<label for="file1">File 1 Upload:</label>
    	<input type="checkbox" name="file1Checkbox">The quick brown fox jumped over the lazy white dog.<br/>
    	<label for="file1label"></label>
    	<input type="file" name="file1" id="file1"/><br/>
    
    	<label for="file2">File 2 Upload:</label>
    	<input type="checkbox" name="file2Checkbox"><br/>
    	<label for="file2label"></label>
    	<input type="file" name="file2" id="file1"/><br/>
    	<button type="submit">Submit</button>
    </form>
    </body>
    </html>
    I am looking to place the phrase "The quick brown fox..." immediately to the right of the checkbox.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use a DTD, preferably html4 strict.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    Nov 2009
    Posts
    7
    DTD works as hoped. It's all slowly starting to make sense. Thanks for help, Fang

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles