Prevent div overlapping - html

Question

I'm having an issue with div overlapping, I believe it's to do with different screen resolutions.
This is my CSS:
#menu {
background: #fff;
width: 790px;
}
#site {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 1075px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 15px 0px #000;
padding: 2px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#social {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories {
border-radius:15px 15px 15px 15px;
background: #fff;
width: 100px;
box-shadow: 0px 0px 5px 2px #000;
padding: 5px;
float:left;
position:fixed;
top: 250px;
-moz-box-shadow: 0 0 15px 0px #000;
-webkit-box-shadow: 0 0 15px 0px #000;
}
#categories img {
border-radius: 15px 15px 15px 15px;
}
And this is my HTML:
<div align="center">
<div id="social">
<h3 style="font-size:18px">Follow Us!</h3>
<a href="#">
<img src="logo.png" />
</a>
<a href="#">
<img src="logo2.png">
</a>
</div>
<div id="categories">
<h3 style="font-size:18px">Categories!</h3>
<a href="categories.php">
<img src="gamereviewresized.png">
</a>
</div>
When I visit my site, it looks like this: http://prntscr.com/6v5qaj
It looks like this for someone with a different screen resolution though: http://prntscr.com/6v5qp3
Help would be appreciated on how to prevent overlapping on different resolutions.
Thanks!

Answer 1

Your #site div has a 1075px fixed width and auto left and right margins.
#site {
width: 1075px;
margin-left: auto;
margin-right: auto;
}
Meanwhile, the Game Reviews tab has a fixed-width of 100px.
Consequently, any screen width less than 1275px (where the margin between the left-edge of the screen and the left-edge of #site is narrower than 100px) will lead to the Game Reviews tab overlapping #site.
Suggestions:
1) Give #site a left-hand margin wider than the 100px wide Game Reviews tab (and right-hand margin to match)
2) For #site, change the width: 1075px; declaration to max-width: 1075px; (this will enable the width of #site to shrink when the screen is narrower than 1275px).
Example:
#site {
max-width: 1075px;
margin-left: 120px;
margin-right: 120px;
}

Answer 2

You'll have to use media queries to adjust the height the image , in your case i am guessing the image is :
<img src="gamereviewresized.png">
here is a simple example how you can adjust the height of a img using a media query :
<img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
CSS ::
img{
max-width:400px;
height: auto;
}
#media only screen and (max-width : 480px) {
img{
max-width:200px;
height: auto;
}
}
fiddle here. , reduce the width of the display section to below 480px to see what i mean .
you can study more media queries here.