CODEWITHSUNDEEP
csshtmllayoutheight
chiliNUT
chiliNUT

Reputation: 19582

2 divs that "should" have equal height, but one appears to be a pixel larger than the other

EDIT again: They appear to look the same at certain zoom levels, but zooming in and out reveals the discrepancy. FF's default zoom makes them look incorrect, Chrome's default looks OK but the discrepancy is revealed after zooming in.

EDIT: here is a jsfiddle http://jsfiddle.net/eHRkb/

Here is the situation: My base "unit" is a 50px x 50px square.

I have a div that is 48x98 with a border of 1 for a total size of 50x100, so that is a 1x2.

I have a div that is 48x48 with a border of 1 for a total size of 50x50, so that is a 1x1.

I have a div that is 50x100 with 0 border, for a total size of 50x100. That is the 1x2 Container, intended to hold 2 1x1 divs.

I want to display two 1x1s on top of each other, and a 1x2 immediately to the right. This is achieved by putting the 2 1x1 divs into the container, and both the 1x2 and 1x2 container are float:left, so it should look like this:

|[X]||   |
|[X]||   |

The problem I am having is that the left div, the container, appears to be 1 pixel shorter than the div on the right. They are both 100px in height, including borders, so I am not sure what is wrong, since their heights should be identical, right? Below is my CSS and HTML.

CSS

.tile1x1
{
    width:48px;
    height:48px;
    float:left;
}

.tile1x2
{
    width:48px;
    height:98px;
    float:left;
}

.tile1x2Container
{
    width:50px;
    height:100px;
    float:left;
    border:none;
}

.border1
{
    border:1px solid black;
}

HTML

<div class="tile1x2Container">
<div class="tile1x1 border1"></div>
<div class="tile1x1 border1"></div>
</div>
<div class="tile1x2 border1"></div>

Thanks for reading!

Upvotes: 2

Views: 1706

Answers (2)

keenydev
keenydev

Reputation: 120

We can use the box-sizing property to make it fit. To do this, we need to make a couple changes.

.tile1x1Thumb should have a height of 49px not 48px.

Now add the following into .border1:

box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;

http://jsfiddle.net/eHRkb/1/

Documentation
box-sizing

Upvotes: 2

Alohci
Alohci

Reputation: 83125

This is a rounding error caused by the zoom.

You have, at 1:1 zoom 50 + 50 = 100.

Now if you have say, a 5:3 zoom you get 83.33 + 83.33 = 166.66

when you round these to actual pixels, that becomes 83 + 83 = 167 and you have a 1 pixel discrepancy.

Upvotes: 3

Related Questions