HTML / CSS breaks div when zooming out

I am designing a website for my father and so far I'm midway the index page only. What is bugging me that when I zoom out to around 30% (just for tests sake) The divs are broken and they end up out of place (will show you an example). Also even the divs do not stay as one "whole entity"

I tried basically everything, the min-width (which is 965px). Is there a way to make it round up Percentage wise sort of? If so, how can it be made considering that the width max-width has to be 965px?

My website is mainly for PCs.

Also I am using HTML5 and CSS3

There is one outer div which puts the whole body into a "box"

Warning: My header is in a PHP so is the footer and then I just load them. I will be posting both the header.php and the generalbackground CSS

The CSS Code is this:

@charset "utf-8";
/* CSS Document */

body
{
    background:url(pics/bg.jpg) no-repeat center center fixed;

    background-color:#282828;
    font-family: 'Sancreek', cursive;
    min-width:965px;
    margin: 0 auto;
}
.bodyoutline
{
    min-width:100%  ;
}
div.upperbody
{
    background:url('pics/topbg.png') no-repeat center center;
    width:965px;
    height:100px;
    margin: 0 auto;
}
div.body
{
    background:url('pics/divbg.png') no-repeat center center fixed;
    width:965px;
    height:1304px;
    margin: 0 auto;
    margin-top:-25px;
    }

div.header
{
    background:url('pics/header.png');  
    width:965px;
    margin: 0 auto;
    height: 319px;
    overflow:hidden;    
}

div.logo
{
    background:url('pics/logo.png');
    width: 220px;
    height: 215px;
    float:left;
    margin-left:20px;
    margin-top:20px;    
}

div.groupPhoto
{
    background:url('pics/group.png');
    float:right;
    margin-right:30px;
    width:552px;
    height:244px;
    margin-top:30px;
    transform: rotate(12deg);
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Safari and Chrome */
}

div.mainContent
{
    width:965px;
    margin: 0 auto;
    float:left;
}

div.menuLinks
{
    width:965px;
    margin: 0 auto;
    text-align:center;
}


ul,li.menuLinks
{
    width:965px;
    margin: 0 auto;
    display:inline;
    font-size: 38px;    
    padding: 10px;
    color: #39100a;
    font-weight:bold;
}
div.separator
{
    width:965px;
    text-align:center;
    margin:0 auto;
    height:50px;
}

div.box
{
    width:965px;
    margin: 0 auto;

}

div.updec
{
    background:url('pics/updec.png') center no-repeat;
    width: 965px;
    height: 202px;
}

h1.titles
{
    margin-left:75px;
    font-size:30px;
}
h1.ePhotos
{
    float:left;
    font-size:18px;
    text-decoration:underline;
    margin-left:25px;
}

.position
{
    margin-left:90px;
    margin-top:-130px;
}

a:visited
{
    text-decoration:none;
    color:#000; 
}
a:hover
{
    text-outline:#000;
    outline-color:#000;
    outline-width:2px;
    margin: 0 auto;
}

header.php

<!DOCTYPE>

<html>
<head>  


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Copyright" content="© Dorienne Grech (DodoSerebro), All Rights Reserved ">
<meta name="description" content ="Forever Friends Official Website. All the Latest Dances Walkthroughs, Videos of Recent Events, Photos, Contacts and More regarding Forever Friends Linedancers will be found here!, latest Dances">  
<meta name="keywords" content="">
<title>Forever Friends Lineadancers Official Site</title>
<link rel="stylesheet" type="text/css" href="generalbackground.css">
<link rel="stylesheet" type="text/css" href="accordion.css">
<link href='http://fonts.googleapis.com/css?family=Sancreek' rel='stylesheet' type='text/css'>


</head>

<body>
<div class="bodyoutline">
<div class="upperbody"></div>
<div class="body">

    <div class="header"> <!-- Header containing Logo and Group Photo -->
        <div class="logo"></div> <!-- Logo -->
        <div class="groupPhoto"></div> <!-- end of groupPhoto -->
    </div> <!--End of header -->

    <div class="mainContent"> <!--Main Body Consisting of Links / Video/Photo and others -->

        <div class="menuLinks"> <!-- Menu Links -->
            <ul class="menuLinks">
                <li class="menuLinks"><a href="index.php">Home</a></li>
                <li class="menuLinks"><a href="about.php">About</a></li>
                <li class="menuLinks"><a href="dances.php">Dances</a></li>
                <li class="menuLinks"><a href="videos.php"> Videos </a></li>
                <li class="menuLinks"><a href="events.php">Events </a></li>
                <li class="menuLinks"><a href="contact.php">Contact</a></li>
             </ul>
         </div> <!-- end of mainContent -->

Result of Zooming out to 30%

http://imageshack.us/photo/my-images/571/y1bw.jpg/

PS: BROWSER Currently Testing and using is GOOGLE CHROME: Version 29.0.1547.66 m

thanks

回答1:

best practice would be

.bodyoutline
{
    position: relative;
    min-width: 1366px;
    max-width: 2048px;
    margin: 0px auto; 
    width: 100%;
}

This will make your all elements be in the div and always aligned regardless of zoom-in or zoom-out.

回答2:

What I found best people is to use the MEDIA QUERIES

By Simply adding

@media (max-width: 600px)
{
  //All the CSS [classes] to be effected by the change in screen will be written here for e.g
h1
{
  font-size:20px;
}
}

When the screen is 600px or smaller (or zoomed out) the font-size of h1 will change to 20px whereas ALL the other CSS will stay as originally written (as it is the parent)

In other words:

Media queries will ONLY affect those classes written between the media queries (will overwrite the original)