1. <div id="main-box"> ........ 
   

2. <div id="wrap" class="clearfix"> ............ 
   

3. <div id="header"> ........ 
   

4. <div id="content"> ............... 
   

5. <div id="section1"> ...... 
   

6. </div> <div id="section2"> ........ 
   

7. </div> </div> </div> </div>

1. <script type="text/javascript"> $(document).ready(function(){ 
   

2. $('#main-box').click(function() {

3.  alert(getCaretPosition(this)); 
   

4. }); 

5. }); 

6. function getCaretPosition(editableDiv) { 

7. var caretPos = 0, containerEl = null, sel, range; 

8. if (window.getSelection) { 
   

9. sel = window.getSelection(); 

10. if (sel.rangeCount) { range = sel.getRangeAt(0); 
    

11. if (range.commonAncestorContainer.parentNode == editableDiv) 

12. { caretPos = range.endOffset; } } } 
    

13. else if (document.selection && document.selection.createRange) {

14.  range = document.selection.createRange(); 

15. if (range.parentElement() == editableDiv) { 

16. var tempEl = document.createElement("span"); 
    

17. editableDiv.insertBefore(tempEl, 
    

18. editableDiv.firstChild); 
    

19. var tempRange = range.duplicate(); 
    

20. tempRange.moveToElementText(tempEl); 
    

21. tempRange.setEndPoint("EndToEnd", range); 
    

22. caretPos = tempRange.text.length; } } 
    

23. return caretPos; } </script>

I need to get dive id when mouse over or click? if someone has any idea please share!