Two <Div> in a <Div> by a div :)

[herghost]

Hi all, I am having some problems with my css, I have a big box which is going to be a form, and I want the labels on one side and field boxs on the other so it looks equal.

 

However instead of appearing left and right, they appear one after another on top of each other.

 

This is what I have

#left {
  
width:50%;
background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
border:#DDDDCA solid 7px;
margin:0 0 4px 0;
padding:5px 10px 6px 9px;
color:#878767;
}

#leftt {

left:0px;
width:150px;

}

#rightt {

left:200px;
width:300px;

}

<div id="left">
<h3>User Registration</h3>
<p>
Welcome to the signup page! Here you can signup for your user account at swaptick.co.uk allowing you to buy, sell and swap your tickets.</p><p>Start here by entering your desired username:
</p><br />
<div id="leftt">
<form action="" method="post" name="signup">

<label>Username</label><br />

<label>Password </label><br />

<label>Repeat Password</label><br />

</div>
<div id="rightt">
<input name="username" id="username" type="text" width="120px" />
<script type="text/javascript">
var username = new LiveValidation('username');
username.add( Validate.Length, { minimum: 4 } );
</script>
<img id="tick" src="tick.png" width="16" height="16"/>
<img id="cross" src="cross.png" width="16" height="16"/>
<br />

<input name"password" type="password" id="password" value="" maxlength="32" /><br />


<input name"password1" type="password" id="password1" value="" maxlength="32" />
<script type="text/javascript">
var password = new LiveValidation('password');
password.add( Validate.Length, { minimum: 4 } );
</script>
<script type="text/javascript"> 
	            var password1 = new LiveValidation('password1');
	            password1.add(Validate.Confirmation, { match: 'password'} );
	          </script>  

</div>			  
</div>
</form>

 

[svanigiorgi]

you can use float

[V]

I agree use floats or tables.

 

for example

 

float:right

 

or

 

float:left

 

 

[isedeasy]

I normally do something along the lines of...

 

<div class="form_row">
        <label>label</label>
        <input type="text" name="text"/>
</div>
<div class="form_row">
        <label>label 2</label>
        <input type="text" name="text2"/>
</div>
<div class="form_row">
        <label>label 3</label>
        <input type="text" name="text3"/>
</div>

 

.form_row {
clear:left;
padding:5px; /* adjust to make look nice */
border-bottom:1px solid #ccc; /* optional */
}

.form_row label {
display:block;
float:left;
width:200px;
padding:2px 0 0 0; /* adjust to make look nice */
}

.form_row input {
display:block;
float:left;
width:300px;
}

 

I just wrote this in the textarea here so excuse the formatting, its also untested