1. Home
  2. Forums Index
  3. Browser Side / CSS 5:14 am May 2, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Div inline within parent div

         

joshdmitchell

7:44 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



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 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<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>

londrum

7:49 pm on Dec 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



it might be because the input box is block-level as well. try making that inline as well. you'll probably have to give it a specific width to tie in with your design. 

#username input { width: 10em; display: inline; }

joshdmitchell

8:02 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



Thanks londrum. I tried altering the code (below). No effect. Perhaps I should move back to a table format, but then I'm not sure if I can structure the javascript to work on individual cells in a table. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<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;
}
#username input 
{ 
width: 10em; 
display: inline; 
} 
#usernote
{
font-weight: 400;
font-family:Arial;
padding: 0em;
font-size:12px;
width:300px;
display: inline;
}
#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>

londrum

8:14 pm on Dec 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



i think i know what it is... the input box and div#usernote are both wrapped inside the div#username - which is only 300 pixels wide.

so the message is automatically wrapping underneath the input box.
if you increase the width of the div#username then it should fit alongside it.

joshdmitchell

8:34 pm on Dec 26, 2007 (gmt 0)

10+ Year Member



Thanks! I've tried expanding to 700px -- no luck. Any other ideas? I'm tapped out.
Thanks! 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<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:700px;
padding-left:20px;
}
#usernote
{
font-weight: 400;
font-family:Arial;
padding: 0em;
font-size:12px;
width:200px;
display:inline;
}
#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;
}
#username input 
{ 
width: 10em; 
display: inline; 
} 
</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>

Xapti

9:28 pm on Dec 26, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can try floating your elements instead of inline display.
And what's that size="30"? why don't you use CSS instead? since I think that's depreciated.
Also, I'm not sure if this is a problem, you have a 700px width element with a 100px side margin inside a 700px wide container...

[edited by: Xapti at 9:41 pm (utc) on Dec. 26, 2007]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 5:14 am May 2, 2026