CSS Problem - Urgent Help Required

Basically I'm having problems aligning one piece of text to the left, and another piece of text to the right.

My code is as follows:

<div class="gbox">
            <div class="gboxtitle">» Members</div>
                   <span class="text">
                Username: <input type="text" name="username" class="username" value="Username" />
                <br /><br />
                Password: <input type="password" name="password" class="password" value="Password" />
                <input type="checkbox" name="checkbox" class="checkbox" /> <p class="test">Remember Me</p> <p class="test1">Sign In</p>
                </span>
        </div>

HTML:

.gbox {
margin-bottom: 10px;
background: #fff;
border: 1px solid #36b38f;
}
.gboxtitle {
padding-left: 8px;
padding-top: 8px;
background: url("images/greeng.gif") repeat-x;
height: 24px;
border: 1px solid #fff;
color: #fff;
}
.test {
float: left;
margin: 0px;
}
.test1 {
float: right;
margin: 0px;
}

Code (markup):

Anyone got any ideas how I can do it, currently, the aligning works but the text doesnt stay in the box.

 

Add a height attribute for .gbox

I tried this and the text is inside the box now

.gbox {
margin-bottom: 10px;
background: #fff;
border: 1px solid #36b38f;
height: 120px;
}

 

The box is going to need to expand though

 

Try this:

<div class="gbox">
            <div class="gboxtitle">» Members</div>
                   <span class="text">
                Username: <input type="text" name="username" class="username" value="Username" />
                <br /><br />
                Password: <input type="password" name="password" class="password" value="Password" />
                <input type="checkbox" name="checkbox" class="checkbox" /> <p class="test">Remember Me</p> <p class="test1">Sign In</p>
                </span>
     [B]<div style="clear:both;"></div>[/B]   

</div>

Code (markup):

 

What you have is a form, and you should write is as such. This means form element, fieldset (hide with border: none; if you want), legend, all the works. Labels for each input with the same "for" as the input's id means even the blind can use your form (if that were useful for you).

<div class="gbox">
    <p>&gt;&gt;Members</p>
    <form action="whatever" method="post">
      <fieldset>
      <legend><span>Pretty please would you log in?</span><legend>
	<div>
	<label for="username">Username:</label>
	  <input type="text" name="username" id="username" />
	</div>
	<div>
	<label for="password">Password:</label>
	  <input type="password" name="password" id="password" />
	</div>
	<div>
	<input type="checkbox" name="checkbox" id="remember" />
	  <label for="remember" class="remember">Remember me</label>
	<input type="submit" id="submit" value="Sign In" />
	</div>
      </fieldset>
      </form>
    </div>

Code (markup):

CSS

* {
  margin: 0;
  padding: 0;
}

.gbox {
  margin: 0 auto;
  background: #fff;
  width: 400px;
  border: 1px solid #36b38f;
}

p {
  padding-left: 8px;
  padding-top: 8px;
  background: url("images/greeng.gif") repeat-x;
  height: 24px;
  border: 1px solid #fff;
  color: #000;
}

fieldset {
  border: none;
}

legend span {
  display: block;
  color: green;
  padding-bottom: 5px;
  padding-left: 5px;
  /*whatever style*/
}

form div {
  width: 350px;
}
label {
  display: block;
  float: left;
  clear: left;
  width: 100px;
}


label.remember {
  display: inline;
  float: none;
}

form div {
  clear: left;
  float: left;
  padding: 5px;
}

#submit {
  margin-left: 100px;
}

Code (markup):

But I dunno how you want your form to look.
http://stommepoes.jobva.nl/Tests/form.html
looks like sh*t in Konqueror and thus I assume Safari but I dunno why.

Even better is to remove the <p> and move Members to inside the Legend's span and style to your liking.

But it always need a width. So what's it expanding for? Wider content inside or to accomadate other divs?

*Edit oh you meant the height. Should be automatic.