How to display two forms next to each other

css, html

Solution

You just need to `float: left;` the forms, and it is recommended to also `clear: right;` the second form, so that other floating elements don't appear to the right of it. Finally, `clear: both;` on the `<p>` that follows the second form so no preceding element floats to the left or right of it.

form {
 /* Float both forms to the left */
 float: left; 
 /* borders added for visibility. Just remove them */
 border: 1px solid red;
}
form#updateForm {
 clear: right;
 /* with some space to the left of the second form */
 margin-right: 20px; 
}
/* Give an id to the <p> which follows the second form and clear: both */
p#submit {
  clear: both;
}

In your markup, give the `<p>` which follows the second form an id, so it can be easily targeted in the CSS

<p id='submit'><button id='updateSubmit'>Update Date/Start Time</button></p>

Then move it inside the preceding `<form>` tag, since it is a part of that form.

Here is a demonstration

Problem

I am not very strong with css but what I have is 2 forms below: ``` //below is where it displays course name $outputcourse = ""; $outputcourse .= "<p><strong>Course:</strong> " . $course . " - " . $coursename . "</p>"; //below is where it displays module name $outputmodule = ""; $outputmodule = sprintf("<p><strong>Module:</strong> %s - %s</p>", $moduleId, $moduleName); //below is form where it displays assessments drop down menu $assessmentform = "<form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'> <p>{$outputcourse}</p> <p>{$outputmodule}</p> <p><strong>Assessments:</strong> {$sessionHTML} </p> </form>"; echo $assessmentform; } //below is form where it displays all of the text inputs and submit button $editsession = "<form id='updateForm'> <p><strong>Current Assessment's Date/Start Time:</strong></p> <table> <tr> <th>Assessment:</th> <td><input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /> </td> </tr> <tr> <th>Date:</th> <td><input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='' /> </td> </tr> <tr> <th>Start Time:</th> <td><input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value=''/> </td> </tr> </table> <div id='currentAlert'></div> <p><strong>New Assessment's Date/Start Time:</strong></p> <table> <tr> <th>Assessment:</th> <td><input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /> </td> </tr> <tr> <th>Date:</th> <td><input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /> </td> </tr> <tr> <th>Start Time:</th> <td><input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/><span class='timepicker_button_trigger'><img src='Images/clock.gif' alt='Choose Time' /></span> </td> </tr> </table> <div id='datetimeAlert'></div> </form> <p><button id='updateSubmit'>Update Date/Start Time</button></p> <div id='targetdiv'></div> "; echo $editsession; ``` CSS: ``` form#assessmentForm { float: left; border: 1px solid red; } form#updateForm { float:left; clear: right; /* with some space to the left of the second form */ margin-right: 100px; } p#submitupdatebtn { clear: both; } ``` At the moment both form are displayed above one another. What I really want to do is display `$editsession` form to be displayed next to the `$assessmentform` form on the right hand side with a little space in between the two forms. How can this be achieved? And I want this to work in all Major browsers. Below shows two screenshots merged together to show how I want it to be displayed: Thanks UPDATE: Below is now what it is displaying:

Original source