How to keep divs from overlapping on resize - html

Question

I'm making a homepage and it works great in my resolution, but if I try to resize the window, the different logos (divs) start to overlap each other.
This is how it's supposed to look:
But whenever I resize the window, the logos (divs/pictures) overlap.
I have a lot of code that is what I believe to be irrelevant to the problem, but just in case, this is the complete code at jsfiddle (the pictures/font doesn't work though): http://jsfiddle.net/sXy3u/
Otherwise, this is an example of code of each div that I believe you'll need to help:
<div id="youtube">
<img src="youtube.png"/>
<a href="http://www.youtube.com/">
<div id="youtubeHover">
<div id="youtubeCircle">
<div id="youtubeArrow">
</div>
</div>
</div>
</a>
</div>
That's an example of one of the tiles. Now for two of the css codes:
#youtube {
width: 195px;
height: 195px;
margin-top: 5px;
padding-top: 5px;
position: relative;
overflow: hidden;
}
And the one that's overlapping:
#yahoo {
margin-top: -810px;
margin-left: 600px;
width: 195px;
height: 195px;
position: relative;
overflow: hidden;
}

Answer 1

This is where you have to use the Grid System Link
It gives you responsive layout depends on your screen such as Mobile, iPad, 1024x768 or HD Wide Screen. so if you use grid system, you don't need to recode your massive CSS. just attach every Metro Style Boxes in HTML part only with almost less coding.
I guess you have no idea about Grid Systems in Web Pages. no problem. I'll give you some basic tutorial links. have a look.Link
and this one is all available Grid System in the Web Industry nowadays. just have a look.
and if you use Grid System to this concept, you will amaze :)

Answer 2

You need to make your own custom responsive system up for this. Here's some basic stuff you can try out:
DEM0: http://jsbin.com/AKopuGo/1/
Notice how the sizes for the smallest device, which is 240px, the boxes don't exceed 200px total, but as the page gets bigger, the boxes are sized differently. Then the floats don't take effect until a certain min-width. You will need to learn more about responsive and fluid css if you intend to make this a career. All these min-widths are guesses and the styles will need to be set up and adjusted for each min-width, but not repeated. If a class is used for all sizes, put it outside any media queries, if it's use for a certain min-width (like the sizes of the box) put it there.
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both
}
.page-container {
margin: 0 auto;
padding: 3%;
}
.logo-box {
width: 210px;
border: 1px solid red;
}
.logo-box > div {
float: left;
width: 100px;
height: 100px;
background: #fff;
margin-right: 5px;
margin-bottom: 5px;
}
.logo-box > div.wide {
width: 205px
}
.text {
margin-bottom: 3%
}
#media (min-width:600px) {
.logo-box {
width: 250px
}
.logo-box > div {
width: 120px;
height: 120px;
}
.logo-box > div.wide {
width: 245px
}
}
#media (min-width:800px) {
.float-left {
float: left
}
.float-right {
float: right
}
.text {
margin-left: 3%
}
.logo-box {
width: 310px
}
.logo-box > div {
width: 150px;
height: 150px;
}
.logo-box > div.wide {
width: 305px
}
}
#media (min-width:1200px) {
.logo-box {
width: 410px
}
.logo-box > div {
width: 200px;
height: 200px;
}
.logo-box > div.wide {
width: 405px
}
}
HTML
<div class="page-container">
<h1>Title</h1>
<section class="text float-right"> Date time etc. </section>
<section class="logo-box first float-left clearfix">
<div class="wide">
Reddit
</div>
<div class="square">
YouTube
</div>
<div class="square">
Google
</div>
<div class="square">
Gmail
</div>
<div class="square">
NetFlix
</div>
<div class="wide">
Pandora
</div>
</section>
<!--/.logo-box-->
<section class="logo-box second float-right clearfix">
<div class="wide">
Reddit
</div>
<div class="square">
YouTube
</div>
<div class="square">
Google
</div>
<div class="wide">
Reddit
</div>
</section>
<!--/.logo-box-->
</div>
<!--/.page-container-->
You'll also need to use fluid images.