CSS float help needed

Question

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.

score 1 · Accepted Answer · answered Jun 17 '11 at 00:12

1

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

#global_body_container {
    overflow: hidden;
}

answered Jun 17 '11 at 00:12

alex

479,566
201
878
984

@alex I tried that but it's not working yet. .home_icons_left{ margin-top: 15px; margin-left: 58px; padding: 15px; float: left; overflow: hidden; } .home_icons_right{ margin-top: 15px; padding: 15px; float: left; overflow: hidden; } – Kanchana Randika Jun 17 '11 at 00:23
@alex what about now? #global_body_container{ width: 746px; position: absolute; padding-bottom: 10px; border-color: #c6c8cc; border-style:dashed; clear: both; overflow: hidden; } – Kanchana Randika Jun 17 '11 at 00:30
@alex Ya but the problem is it's not working.Now I am going through the script again to find the mistake. Thank you for your idea alex. – Kanchana Randika Jun 17 '11 at 01:08
@Ceylo: You should show the HTML too or maybe put something up on http://jsfiddle.net. – alex Jun 17 '11 at 01:17

score 1 · Answer 2 · answered Jun 17 '11 at 01:38

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;

score 0 · Answer 3 · answered Jun 17 '11 at 00:13

0

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

answered Jun 17 '11 at 00:13

shinkou

5,138
1
22
32

score 0 · Answer 4 · edited May 23 '17 at 12:13

0

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?

edited May 23 '17 at 12:13

Community

1
1

answered Jun 17 '11 at 00:34

Ian Yang

1,091
8
20

@lan Yang I tried your method but now the footer moved to the right side little bit.mmm no it's located next to the first image from the right side.Also this has expand the width of the site.I mean I have to scroll to view a part of the footer. – Kanchana Randika Jun 17 '11 at 00:47
See Jason's answer, you should not have `position: absolute` in the footer. – Ian Yang Jun 18 '11 at 22:59

CSS float help needed

4 Answers4

Linked