Web Design Forums

joshdmitchell · 26-12-2007, 14:42

Hi there,

I'm really struggling to get two div's to appear inline within a parent div (code below). There are javascript elements that require this structure (for text to appear when field selected). Just simply need to get the div "usernote" to appear inline with the form field, as opposed to under the field.

Any help would be greatly appreciated!

Thanks!
Josh

Code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "blocked">
<html xml:lang="en" xmlns="blocked" >
<head>
  <meta http-equiv="content-language" content="en" />
  <title>User Registration</title>
<style>
html, body {
  color: #000;
  background-color: #fff;
  font-size:15px;
}

form div.active {
  background-color: #F5F5DC;
  border: 0px solid #8a8;
}

#username
{
	font-family:Arial;
	font-weight:bold;
	padding-top: 1em;
	padding-bottom: 1em;
	width:300px;
	padding-left:20px;
}

#usernote
{
	font-weight: 400;
	font-family:Arial;
	padding: 0em;
	font-size:12px;
	width:300px;
}

#user_registration
{
	border:1px solid #6495ED;
	width:700px;
	background-color: #ECF1EF;
	margin-left:100px;
}

#user_registration p
{
	clear:both;
	margin-top:0px;
	margin-bottom:0px;
}

</style>
<script type="text/javascript"><!--
function hasClassName(el,c){
  c=c.replace(/\-/g,'\\-');
  return (new RegExp('(^|\\s)'+c+'(\\s|$)')).test(el.className);
}
function addClassName(el,c){
  if(hasClassName(el,c)) return;
  var curClass=el.className||'';
  el.className=curClass+((curClass.length>0)?' ':'')+c;
}
function removeClassName(el,c){
  var re=new RegExp('\\s*'+c.replace(/\-/g,'\\-')+'\\s*');
  el.className=el.className.replace(re,' ').replace(/^\s*|\s*$/g,'');
}
function highlightElm(el,light){
  if(!el) return;
  if(light) addClassName(el,'active');
  else removeClassName(el,'active');
}
window.onload = function(){
	document.getElementById('field1').onblur = function() {
	document.getElementById('usernote').style.display = 'none';
	highlightElm(this.parentNode, false);
}
	document.getElementById('field1').onfocus = function() {
    document.getElementById('usernote').style.display = 'block';
    highlightElm(this.parentNode, true);
}
}

// -->
</script>


</head>
<body>

<form method="post" action="" id="user_registration" name="user_registration">
<div id="username">
	Username
	<p></p>
	<input type="text" id="field1" name="field1" size="30" tabindex="1">

	<div id="usernote" style="display:none;">
	Your username can only contain letters (A-Z) or numbers (0-9)
	</div>
</div>


</form>	

</body>
</html>

Shiro · 26-12-2007, 16:12

The main reason you can't do what you say you are trying to do, is that you only have two divs, and they aren't inside another div.

Also you have an empty set of P tags. But that's not really related to your issue.

pgo · 26-12-2007, 17:53

If you had two elements inside another, you could either float one left and one right with a clearing element at the bottom or float both left (my preference, really).

CWSites · 03-01-2008, 14:33

The way that I would do it would be like this

HTML Code:


<div id="username" style="float:left;">
Username <input type="text" id="field1" name="field1" size="30" tabindex="1">
</div>
<div id="usernote" style="display:none; float:left;">
Your username can only contain letters (A-Z) or numbers (0-9)
</div>

make sure that you use specific sizes if needed.

PSDgator.com · 24-01-2008, 06:56

use two DIVs inside a main DIV and style the two DIVs with float:left. On the sme level as the main DIV, after the two DIVs insert a <br> with a clear:float.

I hope that helps

pgo · 24-01-2008, 10:59

Quote:

Originally Posted by PSDgator.com

after the two DIVs insert a <br> with a clear:float

First, there's no property called "clear:float". Second, there are better solutions for float clearing that don't require extra non-semantic markup.

You can either float the parent of the float containers - the "float everything" approach. Or you can use: New clearing method needed for IE7? | 456 Berea Street

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

26-12-2007, 16:12	#2 (permalink)
Shiro shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 2,625	The main reason you can't do what you say you are trying to do, is that you only have two divs, and they aren't inside another div. Also you have an empty set of P tags. But that's not really related to your issue.

26-12-2007, 17:53	#3 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	If you had two elements inside another, you could either float one left and one right with a clearing element at the bottom or float both left (my preference, really).

24-01-2008, 06:56	#5 (permalink)
PSDgator.com Registered User Join Date: Jan 2008 Posts: 25	use two DIVs inside a main DIV and style the two DIVs with float:left. On the sme level as the main DIV, after the two DIVs insert a <br> with a clear:float. I hope that helps

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)