When I minimize my HTML/CSS page it squishes all the pictures and texts and ruins the formatting

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta name="generator" content="HTML-Kit Tools HTML Tidy plugin">
    <link href="layout.css" rel="stylesheet" type="text/css">
    <title></title>
</head>
<body>
    <div class="square" font=10px>
        <p></p>
    </div>

    <div id="wrapper">
        <img class="A" src="download.jpg" alt="Solar Panels"/>
        <img class="B" src= "wind.jpg" alt="Windmills"  />
        <img class="C" src= "biomass.jpg" alt="Biomass"  />
        <img class="D" src= "renewable.jpg" alt="Renewable Energy"  />
    </div>  

    <hr>

    <div id = "bottom">
        <p>Contact:*********@gmail.com</p>
    </div>
</body>
</html>

Here is my css

<style type="text/css">
p {
color:#f5f5dc;
font-size:50px;
text-align: center;
margin-top: 20px; 
}
body{
background-color:#fffacd;
font-size:100%;
min-width:800px;
}
.square{
    height: 100px;
    width: 100%;
    position:relative;
    left:-20px;
    border: 2px solid black;
    border-radius: 5px;
    background-color:#0066cc;
    font-size:1.0em;

}
#wrapper{
width:100%;
margin-top: 40px;
margin-bottom: 40px;
}
.A, .B, .C, .D{
width:300px;
height:200px;
float:left;
border:1px solid black;
margin-right:10px;
margin-bottom:40px; 
}
.D{
width:270px;
}
#bottom p{
 color:black;
 font-size:15px;
}
</style>

This is my code how can i minimize it without it squishing together? i have tried making containers. I have tried everything.

I added my css. When I say minimize, I mean when you make the page smaller. Everything gets squished together and the pictures go on top of each other and it looks horrible. It's fine when you maximize it.

Solution

You can use responsive CSS from bootstrap and can use its class when formatting. http://getbootstrap.com/2.3.2/

for example.

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>