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

Solution 1:

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

<bodyclass="site-body"><divclass="header"><divclass="logo"><imgdraggable="false"src="/images/logo.png" /></div><divclass="slogan"><imgdraggable="false"src="/images/slogan.png" /></div><divclass="login"><ahref="/twitter/redirect.php"><imgdraggable="false"src="/images/login.png" /></a></div></div><divclass="bucket"><spanclass="feed_icons"><ahref="#"><imgdraggable="false"src="/images/bucket.png"/></a></span></div><divclass="title"><spanclass="feed_icons"><ahref="#"><imgdraggable="false"src="/images/title.png"/></a></span></div><divclass="socialfeeds"><spanclass="feed_icons"><ahref="#"><imgdraggable="false"src="/images/social_feeds.png"width="100%"height="100%"/></a></span></div><divclass="featured"><imgdraggable="false"src="/images/featured_list.png"width="100%"height="100%" /></div><divclass="footer"><spanstyle='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%;
}

Solution 2:

It's better to use media-queries here.

@media all and (max-width: 60%) and (min-width: 30%) {
  
..........whatever you want to do...................

}

for more info on media-queries visit: css-media-queries