Content loaded under Bootstrap's dropdown selection is stacked one under another instead of side by side

Question

So I have two menu selections to compare two graphs side by side. They should be loaded side by side when they are chosen from the dropdown menu, but I don't understand why they are stacked one under the other instead of side by side, even if I specified float left/right for the two columns they should be in. I checked and all tags seem to be closed, they should be in the right place. Everything else works. What is wrong?

The code:

        $('#inlineFormCustomSelect').change(function() {
        $('.child-item').removeClass('show'); // hide all visible
            $('#' + $( this ).val()).addClass('show'); // Show what is necessary
        });

    $('#inlineFormCustomSelect2').change(function() {
    $('.child-item1').removeClass('show1'); // hide all visible
        $('#' + $( this ).val()).addClass('show1'); // Show what is necessary
    });

        .child-item {
            display: none
        }
        .child-item1 {
            display: none
        }

        .show {
            display: block
        }
        .show1 {
            display: block
        }

#sinistra {
  float:left;
  width:50%
}
#destra {
  float:right;
  width:50%
}






    
    
    
    
    
        

   

    Homepage



  
  
    
    
        
            
                Scegli i capitoli da confrontare...
                
                
                    
                        
                      
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                  
                      
                    
                
                
                



            
        
    



    
        
            Scegli i capitoli da confrontare...

user_8304632 · Answer

I checked it and it seems to be caused by the col-auto class being used, which leads to both selection menus overlapping on smaller screens. Just using the col class should fix your problem.

user_1448871 · Answer

This happens because you have the same id in elements of child-item and child-item1 classes. Html attributes id should be unique on your page to work correctly.

Just add custom prefixes to the ids of your elements, e.g. #col1-1, #col1-2, #col1-3, #col2-1, #col2-2, #col2-3. And fix the corresponding jQuery code.

Content loaded under Bootstrap's dropdown selection is stacked one under another instead of side by side

2 Answers