why this image gallery exceeds its div? - html

Question

I´m modifying an HTML/CSS template. Also, I´m using a premade Image Gallery, which is lengthy (these two have been developed by different designers). I don´t know why the Image Gallery exceeds it´s own div, and overlaps with div of footer. I´m sure that there is something wrong with the image gallery, cause if I put a large picture instead, it wont exceed the footer. How can I fix this issue and limit the image gallery to the main body?
Following is HTML code of the image gallery:
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style="left: 0; top: 31px; height: 750px">
<li><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></li>
<li><img src="lbox/bird2.jpg" alt="" title="" /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div>
Following is Image Gallery´s CSS:
<style type="text/css">
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {width:635px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#bbb;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>
jsfiddle for Image Gallery:
https://jsfiddle.net/dexoey/opzwksmz/
Following is my footer´s code:
<div class="wrapper col7">
<div id="copyright">
<div class="list-group" style="float:left">
<a class="list-group-item" href="" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-cog-li"></i></a>
</div>
<br/> <p>Desgined by </p>
<div class="clear"></div>
</div>
</div>
And following screenshot explains the problem (I havent put full code of my page because its too messy):

Answer 1

I am not sure this is what you want, But try this..
I think you can overcome this problem by using overflow:scroll, so it wont overlap. As per your above fiddle, the image overlaps another image, for that you can use overflow: hidden, like this...
a:hover {text-decoration:none; overflow:hidden;}
i have edited your fiddle, check it once -> https://jsfiddle.net/opzwksmz/3/
check this updated fiddle-> https://jsfiddle.net/opzwksmz/5/
go for flowers tab , i have added overflow:scroll , so all images will sit inside your div itself.

Answer 2

As per Q1. It adds scroll bar, so it occupies some space which makes your div ti shrink a little, so you can increase the width of
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:484px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:484px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
i have changed it from 464 to 484 as shown above.
Q2. Screen size is based on your div width and height, its a good practice to use % instead of pixel. I have changed width pixel to 70% check in below fiddle.
Q3. If you increase the size manually of any component which is inside div, the div size also expands, if the div size is small, to overcome this better you use something like..
max-width: 100%;
height: auto;
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.
As you said using % will be good idea, so better you set you page according to % instead of pixel, easy to change, and it wont exceed its size also if you try to increase the size manually.
CHECK THIS FIDDLE https://jsfiddle.net/opzwksmz/8/
I am not sure , but this may work for you..
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
if ( $(window).width() > 739) {
//nothing happens
}
else {
//write an error message like, alert("screen size is less");
}
See more at: http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery#sthash.zJp7JwAt.dpuf