how to align image option next to each other acc to screen so it doesn't overflow-CodePudding

I want to align my div item next to each other and want when a person hover on checkbox or the image span tag content show on right screen but running the code you can see it the div overflow of the screen

#hide_name{
    display: none;
    background-color: white;
    color: black;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 2px;
}
#img{
    margin: 2rem;
}
.programming_language > div:hover #hide_name{
    display: inline;

}
.programming_language{
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}
.programming_language > div{
    padding: 10px;
    
}

<div id="id_programming_language" ><div>
    <label for="id_programming_language_0"><input type="checkbox" name="programming_language" value="1"  id="id_programming_language_0">
 <img id="img" src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" ><span id="hide_name">Python</span></label>

</div><div>
    <label for="id_programming_language_1"><input type="checkbox" name="programming_language" value="2"  id="id_programming_language_1">
 <img id="img" src="https://www.svgrepo.com/show/43101/java.svg" width="50px" ><span id="hide_name">java</span></label>

</div><div>
    <label for="id_programming_language_2"><input type="checkbox" name="programming_language" value="3"  id="id_programming_language_2">
 <img id="img" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" ><span id="hide_name">C</span></label>

</div><div>
    <label for="id_programming_language_3"><input type="checkbox" name="programming_language" value="4"  id="id_programming_language_3">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1822px-ISO_C++_Logo.svg.png" width="50px" ><span id="hide_name">C  </span></label>

</div><div>
    <label for="id_programming_language_4"><input type="checkbox" name="programming_language" value="5"  id="id_programming_language_4">
 <img id="img" src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" ><span id="hide_name">C#</span></label>

</div><div>
    <label for="id_programming_language_5"><input type="checkbox" name="programming_language" value="6"  id="id_programming_language_5">
 <img id="img" src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" ><span id="hide_name">go</span></label>

</div><div>
    <label for="id_programming_language_6"><input type="checkbox" name="programming_language" value="7"  id="id_programming_language_6">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png" width="50px" ><span id="hide_name">javascript</span></label>

</div><div>
    <label for="id_programming_language_7"><input type="checkbox" name="programming_language" value="8"  id="id_programming_language_7">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png" width="50px" ><span id="hide_name">typescript</span></label>

</div><div>
    <label for="id_programming_language_8"><input type="checkbox" name="programming_language" value="9"  id="id_programming_language_8">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Perl_language_logo.svg/1200px-Perl_language_logo.svg.png" width="50px" ><span id="hide_name">perl</span></label>

</div><div>
    <label for="id_programming_language_9"><input type="checkbox" name="programming_language" value="10"  id="id_programming_language_9">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/2560px-PHP-logo.svg.png" width="50px" ><span id="hide_name">php</span></label>

</div><div>
    <label for="id_programming_language_10"><input type="checkbox" name="programming_language" value="11"  id="id_programming_language_10">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Ruby_logo.svg/1200px-Ruby_logo.svg.png" width="50px" ><span id="hide_name">ruby</span></label>

</div><div>
    <label for="id_programming_language_11"><input type="checkbox" name="programming_language" value="12"  id="id_programming_language_11">
 <img id="img" src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" ><span id="hide_name">scala</span></label>

</div><div>
    <label for="id_programming_language_12"><input type="checkbox" name="programming_language" value="13"  id="id_programming_language_12">
 <img id="img" src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" ><span id="hide_name">swift</span></label>

</div>
</div>
</div>

i want something like this

span content only show on hovering and all the option stay in screen not overflow of the screen

CodePudding user response：

Try this:

div#id_programming_language div label {
    display: flex;
    align-items: center;
}

#hide_name{
    display: none;
    background-color: white;
    color: black;
    padding: 3px;
    box-sizing: content-box;
    border-radius: 2px;
}
#img{
    margin: 2rem;
}
.programming_language > div:hover #hide_name{
    display: inline;

}
.programming_language{
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
}
.programming_language > div{
    padding: 10px;
    
}

<div id="id_programming_language" ><div>
    <label for="id_programming_language_0"><input type="checkbox" name="programming_language" value="1"  id="id_programming_language_0">
 <img id="img" src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" ><span id="hide_name">Python</span></label>

</div><div>
    <label for="id_programming_language_1"><input type="checkbox" name="programming_language" value="2"  id="id_programming_language_1">
 <img id="img" src="https://www.svgrepo.com/show/43101/java.svg" width="50px" ><span id="hide_name">java</span></label>

</div><div>
    <label for="id_programming_language_2"><input type="checkbox" name="programming_language" value="3"  id="id_programming_language_2">
 <img id="img" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" ><span id="hide_name">C</span></label>

</div><div>
    <label for="id_programming_language_3"><input type="checkbox" name="programming_language" value="4"  id="id_programming_language_3">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C++_Logo.svg/1822px-ISO_C++_Logo.svg.png" width="50px" ><span id="hide_name">C  </span></label>

</div><div>
    <label for="id_programming_language_4"><input type="checkbox" name="programming_language" value="5"  id="id_programming_language_4">
 <img id="img" src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" ><span id="hide_name">C#</span></label>

</div><div>
    <label for="id_programming_language_5"><input type="checkbox" name="programming_language" value="6"  id="id_programming_language_5">
 <img id="img" src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" ><span id="hide_name">go</span></label>

</div><div>
    <label for="id_programming_language_6"><input type="checkbox" name="programming_language" value="7"  id="id_programming_language_6">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png" width="50px" ><span id="hide_name">javascript</span></label>

</div><div>
    <label for="id_programming_language_7"><input type="checkbox" name="programming_language" value="8"  id="id_programming_language_7">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png" width="50px" ><span id="hide_name">typescript</span></label>

</div><div>
    <label for="id_programming_language_8"><input type="checkbox" name="programming_language" value="9"  id="id_programming_language_8">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Perl_language_logo.svg/1200px-Perl_language_logo.svg.png" width="50px" ><span id="hide_name">perl</span></label>

</div><div>
    <label for="id_programming_language_9"><input type="checkbox" name="programming_language" value="10"  id="id_programming_language_9">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/2560px-PHP-logo.svg.png" width="50px" ><span id="hide_name">php</span></label>

</div><div>
    <label for="id_programming_language_10"><input type="checkbox" name="programming_language" value="11"  id="id_programming_language_10">
 <img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Ruby_logo.svg/1200px-Ruby_logo.svg.png" width="50px" ><span id="hide_name">ruby</span></label>

</div><div>
    <label for="id_programming_language_11"><input type="checkbox" name="programming_language" value="12"  id="id_programming_language_11">
 <img id="img" src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" ><span id="hide_name">scala</span></label>

</div><div>
    <label for="id_programming_language_12"><input type="checkbox" name="programming_language" value="13"  id="id_programming_language_12">
 <img id="img" src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" ><span id="hide_name">swift</span></label>

</div>
</div>
</div>