Upon closer inspection: At first glance, they may appear identical at certain zoom levels. However, a more detailed examination through zooming in and out reveals a noticeable discrepancy. Firefox's default zoom may make them seem incorrect, while Chrome's default view appears fine but exposes the difference upon zooming.
For demonstration purposes, here is a live example on jsfiddle: http://jsfiddle.net/eHRkb/
The scenario at hand involves my base "unit" being a 50px x 50px square.
I have three main divs: 1. A div sized 48x98 with a border of 1, totaling 50x100 (1x2). 2. A div sized 48x48 with a border of 1, also totaling 50x50 (1x1). 3. A div simply sized at 50x100 without any border, serving as a 1x2 container meant to accommodate two 1x1 divs inside it.
The objective is to stack two 1x1 divs vertically and place a 1x2 div immediately adjacent to them. This layout is achieved by placing the 1x1 divs within the container, both set to float:left, resulting in this formation:
|[X]|| |
|[X]|| |
An issue arises where the leftmost div, the container, seems to be one pixel shorter than its counterpart on the right side. Both are intended to be 100px in height including borders, so the unequal heights pose a puzzling concern. Here is a breakdown of the CSS and HTML utilized:
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>
Thank you for taking the time to review!