Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Screen Resolution

What's Wrong With My CSS , Elements Move And Overlap When Resizing Window To Smaller Size?

Post a Comment
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

<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%;
}

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


Post a Comment for "What's Wrong With My CSS , Elements Move And Overlap When Resizing Window To Smaller Size?"