Clearfix removing margin 0 auto?

Question

Having trouble with clearfix... when in use it will remove my centering (margin 0 auto) for the div. So, using this as an example the 'container' div would be floated to the left rather than centered within 'header'. 'Some content' would be floated items with no defined height. At this point I can only use clear = display: block; clear: both; height: 0; width:100%; in a div at the end to clear them correctly.

What is the problem?

Example :

<div id="header">
    <div class="container">
        <div>
            <p>some content</p>
        </div>
        <div>
            <p>some content</p>
        </div>
                          ****<div class="clear"></div>
    </div>
</div>


#header {width: 100%; margin: 0; padding: 0; clear:both;}

.container { clear:both; width: 960px; margin: 0 auto; padding: 0;}

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

score 3 · Answer 1 · answered Jun 29 '15 at 17:01

3

I just had this issue. To clear margin: 0 auto; you can just use margin-left: 0;

answered Jun 29 '15 at 17:01

imrek

2,930
3
20
36

score 0 · Answer 2 · answered Jan 01 '13 at 05:32

There really isn't a need to use a "clearfix" like this. You just need to remind container that it's a containing element, which is easily accomplished by adding this CSS rule:

.container {
    overflow:auto;
    zoom:1; /* fix for older IE versions */
}

Then you can safely remove the "clearfix" div, as it won't be necessary.

Clearfix removing margin 0 auto?

2 Answers2