title: Positioning an element relative to a textbox
body: <p>I'm working on this asp.net mvc 3 view where I use custom jQuery calendar to let the user pick a date for a search. The problem is that I can't manage to display the calendar exactly the way I want to. I have very basic knowledge for CSS but the calendar is with absolute position so as I understand it I need a parent element for the positioning. So I decided to use table for my dropdowns and textboxes all of which are different search options. The one thing I tried is this :</p>
  
  <pre><code>@using (Html.BeginForm())
  {
      var dateID = "jc_dateBefore";
      var calParent = "jcalendar_parentBefore";
      &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              @Html.DropDownList("kkcId", (SelectList)ViewBag.KKCNames, "Изберете ККС", new { @class = "validateClassKKCType" })
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DropDownList("UserId", (SelectList)ViewBag.UserNames, "Изберете Потребител", new { @class = "validateClassKKCType" })   
          &lt;/td&gt;
          &lt;td&gt;
              @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/&gt;
              &lt;div id="@calParent" class="jcalendar_parent" style="z-index: 999"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              @Html.DropDownList("statusId", (SelectList)ViewBag.Status, "Изберете Статус", new { @class = "validateClassKKCType" })
          &lt;/td&gt;
          &lt;td&gt;
              &lt;input type="submit" value="Search" /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  }
  </code></pre>
  
  <p>I paste the whole code even though I'm almost sure it's pure CSS problem, not connected with the other technologies used here. So the code specific for the calendar is this snippet :</p>
  
  <pre><code>&lt;td&gt;
              @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/&gt;
              &lt;div id="@calParent" class="jcalendar_parent" style="z-index: 999"&gt;&lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>and when I use the above I get this as result :</p>
  
  <p><img src="https://i.stack.imgur.com/p5NAB.png" alt="Calendar"></p>
  
  <p>The calendar is under the right dropdown when I need it to be under the left textbox which is actually the place where the date will be shown if the user picks one.</p>
  
  <p>If I change the code for the snippet like this :</p>
  
  <pre><code>&lt;td&gt;
              @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
              &lt;img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/&gt;
              &lt;div id="@calParent" class="jcalendar_parent" style="z-index: 999"&gt;&lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Leaving it all in one <code>&lt;td&gt;</code> element then I get this :</p>
  
  <p><img src="https://i.stack.imgur.com/9R8sy.png" alt="Calendar 2"></p>
  
  <p>This is almost what I want but know as you can see the textbox is a little below the other elements. And if I remove the margin from the <code>&lt;img&gt;</code> tag then the textbox is back in place but the calendar image is loosing the correct position.</p>
  
  <p>Here is the CSS for the calendar :</p>
  
  <pre><code>.jcalendar_parent{
      z-index: 999;
      position: absolute;
  }
  </code></pre>
  
  <p>Any ideas how to display my elements correctly? Also, I'm using table because it's the only thing I could think, but don't have to use it at all. If there is a better way, please suggest it.</p>
  
  <p>P.S </p>
  
  <p>I don't thinks of this as a solution but this is something that seems to work for now :</p>
  
  <pre><code> &lt;td&gt;
              @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
              &lt;div id="@calParent" class="jcalendar_parent" style="z-index: 999;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>Placing the elements in the table like this I get this :</p>
  
  <p><img src="https://i.stack.imgur.com/zn2Cv.png" alt="calendar wa"></p>
  
  <p>and this is the HTML that is rendered on the browser for the calendar :</p>
  
  <pre><code>&lt;td&gt;
              &lt;input class="jc_dateBefore" id="jc_dateBefore" name="selDate" type="text" value="Изберете Дата" /&gt;
              &lt;div id="jcalendar_parentBefore" class="jcalendar_parent" style="z-index: 999;"&gt;&lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;img onclick="viewCalendar('jcalendar_parentBefore', 'jc_dateBefore')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/&gt;
          &lt;/td&gt;
  </code></pre>