CODEWITHSUNDEEP
css
alex rees
alex rees

Reputation: 79

Extra padding/margin added in Firefox when float:left

Can anyone help me to understand this please?

You can see the example here:

http://jsfiddle.net/zhsnj/3/

HTML:

<div class="rt-block">
    <div>
        <div>
            <div class="itemContainer">
                <span>Lorem ipsum dolor sit amet</span>
            </div>
            <div class="clr"></div>
        </div>
        <div class="k2Pagination">
        </div>
    </div>
</div>

CSS:

.rt-block {
    margin: 10px;
    padding: 15px;
    position:relative;
}

.itemContainer {float:left;}

.k2Pagination {
    margin: 24px 0 4px;
}

.clr {
    border: medium none;
    clear: both;
    display: block;
    float: none;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}

In Firefox, there is a gap between the "itemContainer" and the surrounding "rt-block". Other browsers don't have this.

It is fixed by two things: removing the float:left on itemContainer, and also by removing the margin on k2 pagination. I'd prefer not to do either of these things if possible.

Thanks for any help

Upvotes: 2

Views: 1696

Answers (2)

Tchoupi
Tchoupi

Reputation: 14681

First, this is the display as I see it in Firefox:

enter image description here

I think you have one too many <div>. When viewing on firefox the extra padding is added on the first <div> after <div class="rt-block">. My guess is that it produces a line break that causes the float to float under the line, it seems to be confirmed by the fact that adding line-height: 0 to this div fixes the problem.

You can remove the extra <div>:

<div class="rt-block">
    <div>
        <div class="itemContainer">
            <span>Lorem ipsum dolor sit amet</span>
        </div>
        <div class="clr"></div>
    </div>
    <div class="k2Pagination">
    </div>
</div>

jsfiddle

Or you can set the line height to 0 for the first div:

.rt-block > div {
    line-height: 0;
}

jsfiddle

Or better, make it inline-block:

.rt-block > div {
    display: inline-block;
}

jsfiddle

Upvotes: 3

mbkh10
mbkh10

Reputation: 43

I have no idea what is the reason for that extra spacing in Firefox but you can give padding instead of margin. 

.k2Pagination {
padding: 24px 0 4px;}

This is simple and it might work.

Upvotes: 0

Related Questions