CODEWITHSUNDEEP
cssgoogle-chromecss-float
WotNot
WotNot

Reputation: 113

Float bug in chrome? 1px extra padding, but it's not padding

The following html and css shows two divs inside a container. The left div isn't floated; the right div is floated right.

The right div seems to be one pixel too narrow, and the red background color of the container is therefore showing through in that one pixel gap.

This is a simplification of my problem. http://jsfiddle.net/XPd9J/

HTML

<div class="inner-wrapper">

    <div class="right-sidebar">
        &nbsp;
    </div>

    <div class="content">
        &nbsp;<br /><br />
    </div>

</div>​

CSS

.inner-wrapper {
    position:relative;
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    position:relative;
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    position :relative;
    width:60%;
    background-color:silver;
    margin:0;
    padding:0;
}
​

Upvotes: 10

Views: 14691

Answers (6)

yunzen
yunzen

Reputation: 33439

It's not the float that makes the problem. It's the percentage width. In FF and IE it works perfect, but Chrome calculates percentage width so, that not always the pixels sum up to the full 100%. Just try to slighty change the window width and you will notice the extra 1 px to disappear/appear sometimes.

How to avoid this behavior? You need to have use the same percentage somehow, so it is calculated just exactely the same. The right sidebar is 40% wide, so you need to have a right margin of 40% for the content div (these 40% are 40% of the containing block element)

http://jsfiddle.net/XPd9J/1/

.inner-wrapper {
    background-color:red;
    overflow:auto;
    width:90%;
    padding:0;
    margin:20px 0 0 20px;
}
.right-sidebar {
    width:40% !important;
    background-color:lime;
    float:right;
    margin:0;
    padding:0;
}
.content {
    background-color:silver;
    margin:0 40% 0 0;
    padding:0;
}
​

Upvotes: 12

arrow
arrow

Reputation: 174

Set "inner-wrapper" to overflow hidden (just in case). Then on the right div use calc(40% + 1px) to fix the issue.

Upvotes: 0

Max
Max

Reputation: 71

Another easy option to get the full 100% is to set the parent element to overflow:hidden and your element to width:101%.

Upvotes: 7

nexus_07
nexus_07

Reputation: 143

I also encountered that issue and I use two option the display:inline-table and display:table-cell in the parent div of the floated elements..although it is not a table, I use that as an alternative

Upvotes: 3

WotNot
WotNot

Reputation: 113

For anyone coming to this in the future, it's possible to create left sidebar / content / right sidebar with liquid floats using the above method. It might be done like this:

Container div

right-sidebar width:30%;float:right;margin:0;padding:0;

content width:40%;float:right;margin:0;padding:0;

left-sidebar margin-right:70%;margin:0;padding:0;

End container div

Provided all the containers have margin:0;padding:0; then this works in FF, IE, Chrome, Safari and Opera (latest) without a problem. Genius. The dodgy browsers should have had this problem solved a long time ago - one can only guess that web designers don't often need pixel perfect placement of sidebars otherwise there would have been huge pressure on the browser builders.

Upvotes: 1

Gabriele Romanato
Gabriele Romanato

Reputation: 71

You got two non-breaking spaces there. &nbsp; character causes the 1px extra space on the left of the right sidebar. Btw, position: relative is redundant in this context (it's only useful when you have to fix something in IE6).

Upvotes: 0

Related Questions