CODEWITHSUNDEEP
htmlcss
user393219
user393219

Reputation:

Percentage Widths & 1px Borders

I've noticed in both current versions of Safari and Chrome that when I create elements side by side, rounding up to a whole 100% number, I get an adjusting small pixel border (since I'm not using a white background for the elements/divs) that resizes. I feel like I'm simply missing a position attribute, but I can't find any resources on el Google to help me out.

A fiddle to illustrate my problem (OS X Safari & Chrome tested)

http://jsfiddle.net/shawnstrickland/HXyZ7/

Upvotes: 4

Views: 1114

Answers (4)

Michael
Michael

Reputation: 11

Webkit has problems calculating percentage values.

http://css-tricks.com/percentage-bugs-in-webkit/

Upvotes: 1

sandeep
sandeep

Reputation: 92803

You can use overflow:hidden;. write like this:

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    overflow:hidden;
    background-color: red;   
}

​

Check this http://jsfiddle.net/HXyZ7/7/

Upvotes: 3

Pheonix
Pheonix

Reputation: 6052

The white gap vanishes as i increase it to 75.3 :p

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    float: right;
    clear:none;
    background-color: red;
    width: 75.3%;   
}

http://jsfiddle.net/sJQeZ/ ​

Upvotes: 1

Smamatti
Smamatti

Reputation: 3931

You use the whole witdh, but your floating options create this issue. Use only one floating direction (left here).

Unfortunately I don't know WHY this happens.

Edited sample
http://jsfiddle.net/HXyZ7/1/

nav {
    float: left;
    width: 25%;
    background-color: blue;
}
article {
    float: left; /* was floating right before */
    background-color: red;
    width: 75%;   
}

Upvotes: 0

Related Questions