Hello there! I recently created a Budget Calculator and integrated it into Drupal 7. To view the results, check out this link:
While I understand there may be numerous errors present, the main issue I'd like to address involves the placement of certain blocks. More specifically, if you click on an option within the "Cursos" optgroup, you'll notice an information box positioned next to the table containing the form. Particularly, selecting "Cursos específicos" sometimes leads to two information blocks being displayed. Upon inspection, their current positioning is defined as follows:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;Although it appears to be functioning correctly, there seems to be a discrepancy in Firefox which raises concerns about potential future issues. Thus, my query is whether there's an alternative method for positioning them relative to the table. Specifically, keeping the 'y' position consistent with the table but adjusting the 'x' position accordingly by adding a few pixels. I believe this could be achieved through two possible approaches:
a) Using JavaScript (although I am not well-versed in it, I can research more).
b) Solely utilizing HTML and CSS.
Given my preference for the latter option, I attempted to combine the table and labels within a single '<div>', designate the labels as 'inline-block', and float them to the right. However, upon doing so, I encountered difficulty adjusting the "top" position property. While these ideas were inspired by threads on Stackoverflow, I am open to suggestions and truly appreciate any assistance provided.