Need help with display using navigation tabs

[rodb]

I am building a page that has multiple tabs for entering data about a person/employee.  Currently I am using 4 tabs(pills) which for the most part appears to work with a small issue.  When the page is initially displayed the personal data page, everything looks correct.  When the Social Media tab is selected the personal data screen is cleared and the social data is displayed.  However, when the Tasks page is displayed it is displayed below the page (either Personal data or Social Media) the is currently displayed.  Can not seem to locate why the screens are not cleared and only showing the selected page.

 

Another minor issue if close the container (line 89 ) at line 96 the display is full width; however, if closed at the end of the tab-content section the display is narrow.

 

Any suggestions would be greatly appreciated.

 

Rod

 

edit_person-new.php

[mac_gyver]

the biggest issue appears to be that the closing </div> for this - <div class="tab-content">, is not after the end of the tabbed content. the closing </div> is on line 288, which is before the tasks and estatus panes.

 

you also have some extra/mis-matched </div> tags.

 

what exact code are you using to accomplish the tabbing (so that someone here could reproduce the problem using your code without making something up that may not be the same as what you are using) and validating the resultant web page at validator.w3.org would help with things like the extra </div> tags.

Edited October 11, 2015 by mac_gyver

[rodb]

Thanks for the reply.  I am using notepad++ but get confused with the left bar indicating the start and stop of a segment.  Went thru code and laid it out with consistent tabs which helps ( but the red line on the left does not match.  WIll not rely on it in the future.