CODEWITHSUNDEEP
htmlcsscss-float
Kanchana Randika
Kanchana Randika

Reputation: 546

CSS float help needed

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

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.

Upvotes: 1

Views: 110

Answers (4)

Jason Gennaro
Jason Gennaro

Reputation: 34855

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;

Upvotes: 1

Ian Yang
Ian Yang

Reputation: 1396

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?

Upvotes: 0

shinkou
shinkou

Reputation: 5154

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

Upvotes: 0

alex
alex

Reputation: 490143

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

#global_body_container {
    overflow: hidden;
}

Upvotes: 1

Related Questions