Getting Two Divs To Sit Side By Side

[Beeeeney]

I have a problem. I'm trying to get two divs to sit side by side but can't for the life of me do it.

 

Here's my code:

 

style.css

 

body {
   text-align:center;
   margin: 0 auto;
   width:700px;
}

span.span1 {
   float:left;
   margin-top:-30px;
}

img.pclogo {
   margin-top:30px;
}

h1 {
   font-size:20px;
}

span.bottomtext {
   font-size:12px;
   float:left;
}

.rightstuff {
   width:348px;
   float:right;
   background-color:black;
}


.leftstuff {
   float:left;
   text-align:left;
   width:348px;
   background-color:red;
}

 

.leftstuff is the left div, .rightstuff is the right div.

 

index.php

 

<div class="leftstuff"><h1>Personal Information</h1><br>
<!--PERSONAL INFORMATION -->


Title:*<br>First Name:*<br>Middle Name:<br>Last Name:*<br>Last Name:*<br>Date of Birth:*<br><br><h1>Passport Details</h1><br>Passport Number:*<br>Date of Issue:*<br>Date of Expiry:*<br>Nationality:*<br>Issue Country:*<br><br><h1>Next of Kin Information</h1><br>Full Name:*<br>Address:*<br>Postcode:*<br>Relationship:*<br>Mobile Number:*<br>Daytime Phone:<br>Evening Phone:<br>Email Address:<br><br><h1>Travel Insurance Details</h1><br>Insurance Company:<br>Policy Number:<br>Medical Company Name:<br>Emergency Medical Contact Number:<br><br><br><span class="bottomtext">I have read and agree to the <a target="_blank" href="http://planetcruise.co.uk/about-planet-cruise/terms">terms and conditions</a></span> <input type="checkbox" name="checkbox">           <input type="submit" value="Submit"><select name="Title"></div>


<div class="rightstuff">  <option selected>Please Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Ms</option>
<option value="Dr">Dr</option>
</select>
<br>



<input type="text" name="Firstname"><br>
<input type="text" name="Middlename"><br>
<input type="text" name="Lastname"><br>		     
<?php echo $form1; ?> <!--$form1 can be found in "includeDOB.php" --><br><br>




<input type="text" name="PassportNo"><br>
<?php echo $form2; ?><br> <!--$form2 can be found in "includeDOB.php" -->
<?php echo $form3; ?><br> <!--$form3 can be found in "includeDOB.php" -->
<input type="text" name="Nationality"><br>
<input type="text" name="Issuecountry"><br><br>



<!-- NEXT OF KIN INFO v -->

<input type="text" name="Fullname"><br>
<input type="text" name="Address"><br>
<input type="text" name="Postcode"><br>
<input type="text" name="Relationship"><br>
<input type="text" name="Mobilenumber"><br>
<input type="text" name="Daytimephone"><br>
<input type="text" name="Eveningphone"><br>
<input type="text" name="Email"><br><br>



<!--TRAVEL INSURANCE DETAILS-->

<input type="text" name="Company"><br>
<input type="text" name="Policynumber"><br>
<input type="text" name="Underwriter"><br>
<input type="text" name="Emergencynumber"><br><br><br></div>

 

The "rightstuff" div just sits under the left one. If I take away the CSS for the left div, the right div will also change. It's like my CSS for the left one is affecting the right one too.

[haku]

Float them both left (even the right div). If there is enough space for them to sit side-by-side, the right div will set next to the left div.

[gristoi]

or you could move the left div under the right div in the html, i have come a cropper on this more than once. If you want something to float right next to something floating left then it needs to be placed before the left float:

 

 

<div class="rightstuff">  <option selected>Please Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Ms</option>
<option value="Dr">Dr</option>
</select>
<br>




<input type="text" name="Firstname"><br>
<input type="text" name="Middlename"><br>
<input type="text" name="Lastname"><br>                  
<?php echo $form1; ?> <!--$form1 can be found in "includeDOB.php" --><br><br>





<input type="text" name="PassportNo"><br>
<?php echo $form2; ?><br> <!--$form2 can be found in "includeDOB.php" -->
<?php echo $form3; ?><br> <!--$form3 can be found in "includeDOB.php" -->
<input type="text" name="Nationality"><br>
<input type="text" name="Issuecountry"><br><br>




<!-- NEXT OF KIN INFO v -->

<input type="text" name="Fullname"><br>
<input type="text" name="Address"><br>
<input type="text" name="Postcode"><br>
<input type="text" name="Relationship"><br>
<input type="text" name="Mobilenumber"><br>
<input type="text" name="Daytimephone"><br>
<input type="text" name="Eveningphone"><br>
<input type="text" name="Email"><br><br>




<!--TRAVEL INSURANCE DETAILS-->

<input type="text" name="Company"><br>
<input type="text" name="Policynumber"><br>
<input type="text" name="Underwriter"><br>
<input type="text" name="Emergencynumber"><br><br><br></div>

<div class="leftstuff"><h1>Personal Information</h1><br>
<!--PERSONAL INFORMATION -->


Title:*<br>First Name:*<br>Middle Name:<br>Last Name:*<br>Last Name:*<br>Date of Birth:*<br><br><h1>Passport Details</h1><br>Passport Number:*<br>Date of Issue:*<br>Date of Expiry:*<br>Nationality:*<br>Issue Country:*<br><br><h1>Next of Kin Information</h1><br>Full Name:*<br>Address:*<br>Postcode:*<br>Relationship:*<br>Mobile Number:*<br>Daytime Phone:<br>Evening Phone:<br>Email Address:<br><br><h1>Travel Insurance Details</h1><br>Insurance Company:<br>Policy Number:<br>Medical Company Name:<br>Emergency Medical Contact Number:<br><br><br><span class="bottomtext">I have read and agree to the <a target="_blank" href="http://planetcruise.co.uk/about-planet-cruise/terms">terms and conditions</a></span> <input type="checkbox" name="checkbox">           <input type="submit" value="Submit"><select name="Title"></div>

[Beeeeney]

or you could move the left div under the right div in the html, i have come a cropper on this more than once. If you want something to float right next to something floating left then it needs to be placed before the left float:

 

 

<div class="rightstuff"> <option selected>Please Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Mr">Ms</option>
<option value="Dr">Dr</option>
</select>
<br>




<input type="text" name="Firstname"><br>
<input type="text" name="Middlename"><br>
<input type="text" name="Lastname"><br>
<?php echo $form1; ?> <!--$form1 can be found in "includeDOB.php" --><br><br>





<input type="text" name="PassportNo"><br>
<?php echo $form2; ?><br> <!--$form2 can be found in "includeDOB.php" -->
<?php echo $form3; ?><br> <!--$form3 can be found in "includeDOB.php" -->
<input type="text" name="Nationality"><br>
<input type="text" name="Issuecountry"><br><br>




<!-- NEXT OF KIN INFO v -->

<input type="text" name="Fullname"><br>
<input type="text" name="Address"><br>
<input type="text" name="Postcode"><br>
<input type="text" name="Relationship"><br>
<input type="text" name="Mobilenumber"><br>
<input type="text" name="Daytimephone"><br>
<input type="text" name="Eveningphone"><br>
<input type="text" name="Email"><br><br>




<!--TRAVEL INSURANCE DETAILS-->

<input type="text" name="Company"><br>
<input type="text" name="Policynumber"><br>
<input type="text" name="Underwriter"><br>
<input type="text" name="Emergencynumber"><br><br><br></div>

<div class="leftstuff"><h1>Personal Information</h1><br>
<!--PERSONAL INFORMATION -->


Title:*<br>First Name:*<br>Middle Name:<br>Last Name:*<br>Last Name:*<br>Date of Birth:*<br><br><h1>Passport Details</h1><br>Passport Number:*<br>Date of Issue:*<br>Date of Expiry:*<br>Nationality:*<br>Issue Country:*<br><br><h1>Next of Kin Information</h1><br>Full Name:*<br>Address:*<br>Postcode:*<br>Relationship:*<br>Mobile Number:*<br>Daytime Phone:<br>Evening Phone:<br>Email Address:<br><br><h1>Travel Insurance Details</h1><br>Insurance Company:<br>Policy Number:<br>Medical Company Name:<br>Emergency Medical Contact Number:<br><br><br><span class="bottomtext">I have read and agree to the <a target="_blank" href="http://planetcruise.co.uk/about-planet-cruise/terms">terms and conditions</a></span> <input type="checkbox" name="checkbox">           <input type="submit" value="Submit"><select name="Title"></div>

 

Worked perfectly, thanks!