CSS float help needed

Guys Please help me to solve this floating problem.I tried different methods but anything didn't work for me.

In the html file,Small images are in the global container.Footer placed right below the global container.But now the footer comes to the top.

These are my css-

CSS of images-

style="margin-top: 25px; margin-right: 48px; float: right;"<br>
style="margin-top: 25px; margin-right: 48px; float: left;"

#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom:开发者_开发技巧 10px;
    position: absolute;
    border: solid;    
}     



#global_body_container{
    width: 746px;
    position: absolute;
    padding-bottom: 10px;
    border-color: #c6c8cc;
    border-style:dashed;
    clear: both;


}

Thank you.

Place on the container of the floated elements overflow: hidden.

#global_body_container {
    overflow: hidden;
}

You have position: absolute; on your #footer_container. Remove that and then add a clearing br under the footer, like so

<div id="global_body_container">
    <img>
    <img>
    etc...

    <br style="clear:both;" />

    <div id="footer_container">
         whatever content...
    </div>

</div>


#footer_container{
    width: 900px;
    height: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    position: absolute;  //REMOVE THIS
    border: solid;    
}

Also, you may want to consider adding more to your border rule, such as thickness and color, e.g., border:1px solid black;

Create a new "content container". Put all your floating images in. Then place the new container right before your footer_container.

Because all your elements in global_body_container are float, so it cannot wrap those images visually.

A simple solution is add a stub at the end of global_body_container, and let it clear float elements.

<div id="global_body_container">
    <img class="left">
    <img class="right">

    <div style="clear:both"></div>
</div>

shinkou has mentioned a clearing trick. You can also refer to clearfix mixin in compass. The expended css looks like:

.clearfix {
    overflow: hidden;
    *zoom: 1;
}

Also refer to discussion in What methods of ‘clearfix’ can I use?