DOM How to add two divs (with jQuery inside them) next to each other?

Question

I am trying to align my two calendars properly so that my text and my calendars are lined up properly.

I think there are two different ways to approach this: (But I don't know how to do them)

1. Adding the jquery statements inside of the table so that they are properly lined up by the format of the table
2. Fixing the css so that it is formatted properly to the page

This is what it looks like:

And this is what I want it to look like:

---

This is my javascript to add the text "Start Date:" and "End Date:" to my table

// to my empty div with the id of roomForDates I create a table to center the text
var holdTheDateInfo = document.getElementById('roomForDates');
var htmlForDateTitles = '<center><table width="400" cellspacing="1" cellpadding="5">';
htmlForDateTitles += '<tr><td><center> Start Date: </center></td>';
htmlForDateTitles += '<td><center> End Date: </center></td></tr>';
htmlForDateTitles += '</table></center>';
holdTheDateInfo.innerHTML += htmlForDateTitles;

This is my jQuery that will add the two calendars to my divs named roomForStartDates and roomForEndDates

$(document).ready(function () {
    // Create the Calendar. The navigation is restricted
    // by setting the "min" and "max" dates.
    $("#roomForStartDates").jqxCalendar({
        width: 220,
        min: new Date(2010, 0, 1),
        max: new Date(2014, 11, 31),
        height: 220
    });
    $("#roomForEndDates").jqxCalendar({
        width: 220,
        min: new Date(2010, 0, 1),
        max: new Date(2014, 11, 31),
        height: 220
    });
}); // end document

This is my current css that I am having trouble with.

#roomForStartDates {
    float: left;text-align:center;
}
#roomForEndDates {
    float: left;margin-left:50px;text-align:center;
}

Thank you in advance!!!! Please let me know if you have any questions!!!

---

Update so far:

Answer 1

To avoid too many comments to the general question as this should better be avoided on SO just the mentioned approach as answer. Just adjusted the Fiddle to this as it's sufficient to have text-align: center for the .container:

<div class="mainContainer">
  <div class="container">
    <div class="image">__________</div>
  </div>
  <div class="container">
    <div id="roomForStartDates">Start Date</div>
    <div id="roomForEndDates">End Date</div>
  </div>
  <div class="container">
    <div class="jqxCalendar">start calendar</div>
    <div class="jqxCalendar">end calendar</div>
  </div>
</div>

CSS:

.mainContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.container {
  width: 420px;
  text-align:center;
}
#roomForStartDates, #roomForEndDates, .jqxCalendar {
  float: left;
  width: 200px;
  margin-left:10px;
}

.jqxCalendar {
  height: 200px;
  background-color:#ccc;
}

As it's only an example for demonstration, possible necessary adjustment for your page would be to adjust the width in the .container class. This width should match 2 x calendar-width + the margin(s). As both containers have 200px width and 10px margin-left, it's 420px here. For positioning the whole div centered I've just added another div as wrapper for all containers and used one of different approaches.

In case this won't work for your layout, just have a look at the suggested methods e.g. here: Stackoverflow - How to put a div in center of browser using CSS
or leave a comment here in case of issues with this possible solution.

Answer 2

I would love to put them into a table (as I said in approach #1) but i just don't know how :( –

Here is how to make an HTML table with one row with two data cells (columns). If you use the same layout for both tables, they will appear the same.

<table>
  <tr>
    <td>
    $..... for calendar 1
    </td>
    <td>
    $..... for calendar 2
    </td>
 </tr>
</table>