Content overlapping while loading

[delta_frost]

http://mondaymorning.nitrkl.ac.in/

This is my institute's website.The problem here is while initial loaading,the content("Headlines") on the left overlap making it look ugly.But once loading is complete,the elements are able to position themseleves accurately.What I have done so far is inspected the elements relating to that area,but I can't understand what's actually wrong with the CSS.The clearfix seems to be okay.Can anyone suggest what is wrong with the CSS.

[JorgeM]

One thing that stood out when I took a quick look at your page and source code is that you are not setting width and height properties on your elements. for example, on the images, you should be setting the width and height so that the browser can position the element prior to downloading it from the web server. For example...

<img id="pic1" src="#" alt="my pic" width="640" height="360" />

In addition, the picture of the week downloads very slowly. When I downloaded the picture to my computer and looked at the properties, it is a 1600x1200 picture. However, on your site its 450x358, so you should save the file on your web server to the same dimension as you will display it on the screen. That should reduce the file size and the browser will download the picture more quickly.

[EvolutionFallen]

The issue seems to be one of speed, as JorgeM indicated. The problem is that the JavaScript that makes your "Featured" slider work loads after the rest of the page, so it can't make the slides disappear until then.

A solution I usually use is to have the default styles in my CSS hide the other slides. Then you make the first slide an exception using a special class. Once the JavaScript kicks in, it can remove this class and start active appropriately. For example, assuming we have the following HTML structure:

<div id="featured-container">
    <div class="featured-slide first-show">
        My Content
    </div>
    <div class="featured-slide">
        More Content
    </div>
</div>

Now we use the following CSS to hide all slides, but then reveal the first slide. Since CSS loads quickly and early, this happens well before JS executes, avoiding embarassing content overlaps.

.featured-slide { display: none; }
.featured-slide.first-show { display: block;}