What's wrong with my CSS , elements move and overlap when resizing window to smaller size?

Ok , so below is my CSS AND HTML code. I have been using percentage for the divs so that those divs can re-adjust to bigger screen sizes . The annoying thing is that when I resize the window to a smaller size on my computer , those elements keep moving till they overlap and I don't want that . How can I use percentages to make those divs re-adjust to bigger resolutions , yet not move when resizing the window to a smaller size based on the CSS and HTML I have below

Here is the CSS

body{
    background:#F4F4F4;
    background-size:100%;
    width:100%;
    height:100%;
    margin:0 auto;
            min-width:1300px;
            min-height:750px;
}
.logo{
    position:absolute;
    left:40%;
    top:5%;
}
    .logo_homepage{
    position:absolute;
    left:4%;
    top:5%;
}
   .homepage_slogan{
    position:absolute;
    left:3%;
    top:45%;
}
    .search_box{
    position:absolute;
    left:30%;
    top:30%;
            width:35%;
            height:50%;
            min-width:35%;
            min-height:50%;

}


    .user_info{
    position:absolute;
    left:75%;
            height:100%;
            width:20%;
            min-width:20%;
            background:white;
}
.header{
    position:absolute;
    top:0px;
    width:100%;
            min-width:98%;
    height:100px;
            min-height:100px;
    left:0;
    background:#EB6A4A; 
}

.slogan{
    position:absolute;
    top:60%;
    left:40.5%;
}

.login{
    position:absolute;
    top:15%;
    left:90%;
}

    .whitebackground{
    background:#FFFFFF;
}

#slides{
    position:absolute;
    top:20%;
    width:50%;
    background:transparent;
    height:20%;
    left:25%;
}
.socialfeeds{
    position:absolute;
    top:41%;
    width:25%;
    height:52%;
            min-width:25%;
            min-height:52%;
    left:25%;
} 
    .heading{
    position:absolute;
    top:20%;
    width:100%;
            min-width:100%;
    height:10%;
            min-height:10%;
    left:2%;
}

    .bucket{
    position:absolute;
    top:18%;
    left:20%;
            width:13%;
            min-width:13%;
}

     .title{
    position:absolute;
    top:20%;
    left:32%;
            width:30%;
            min-width:30%;
}

    .feed_icons{
      margin:20px;

}

.featured{
    position:absolute;
    top:30%;
    width:30%;
            min-width:30%;
    background:transparent;
    height:60%;
            min-height:60%;
    left:60%;
}

and the HTML

<body class="whitebackground">
    <div class="header">
        <div class="logo"><img draggable="false" src="/images/logo.png" /></div>
        <div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
        <div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
    </div>
    <div class="bucket">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
    </div>
        <div class="title">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
    </div>
    <div class="socialfeeds">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
    </div>
    <div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
    <div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013&copy;</span></div>


</body>

Position: absolute pulls the elements out of the DOM rendering rules. The CSS as written tells the browser to always place these elements at X position no matter what size of the element or screen. A List Apart has an excellent article for getting a good grounding in how positining works: http://alistapart.com/article/css-positioning-101

Remove the positioning and instead use either the "display:" or "float:" properties. Things will begin to flow according to the DOM rendering rules.

In addition, make sure applied CSS classes have functional or semantic naming. Avoid using classes that make reference to design treatment since things like colors/big/small can and do change over time., ie, "whitebackground". The code is much better served using something like the "client-name" or .theme and then declaring the background color for that class or on the BODY tag.

HTML Mark-up

<body class="site-body">
    <div class="header">
        <div class="logo"><img draggable="false" src="/images/logo.png" /></div>
        <div class="slogan"><img draggable="false" src="/images/slogan.png" /></div>
        <div class="login"><a href="/twitter/redirect.php"><img draggable="false" src="/images/login.png" /></a></div>
    </div>
    <div class="bucket">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/bucket.png"/></a></span>
    </div>
        <div class="title">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/title.png"/></a></span>
    </div>
    <div class="socialfeeds">
        <span class="feed_icons"><a href="#"><img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/></a></span>
    </div>
    <div class="featured"><img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /> </div>
    <div class="footer"> <span style='margin-left:45%;'> COPYRIGHT 2013&copy;</span></div>


</body>

CSS:

.header {
height: auto; 
overflow: hidden; /* clears floated child elements */ 
width: 100%; 
min-width: 98%;
}
.logo, .slogan, .login {
display: inline-block;
} 
/* or... 
.logo, .slogan, .login {
float: left;
} */
.slogan {
margin-left: 40.5%;
}

its better you use media-queries here...

@media all and (max-width: 60%) and (min-width: 30%) {

..........what ever you whant to do...................

}

for more info on media-queries vist css-media-queries

来源：https://stackoverflow.com/questions/19385490/whats-wrong-with-my-css-elements-move-and-overlap-when-resizing-window-to-sma

标签

html

css

css3

screen-resolution