Как сверстать, чтобы ничего не ехало...

Всем привет. Есть вот такой код

Свернутый текст

<style type="text/css">
    .wrap{width: 620px;}
    .wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}
    .wrap > div.first{margin-left: 0px;}
</style>

<div class="wrap">
    <div class="item first">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
<div class="clear"></div>
</div>

в результате получаем это http://screencloud.net/v/4gtc
Но если нажать Ctrl + "-" получаю вот такую фиговину http://screencloud.net/v/kr5K :angry:
Как нужно сделать чтобы ничего, никуда не ехало? :(
Размеры фиксированные, изменять нельзя.

Во-первых, на втором скрине "ширине шире".

Во вторых, считаем:

wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}

width 138px умножим на 4 блока = 552px.
margin-left: 20px так же на 4 = 80, в сумме 632px

а у вас весь блок .wrap{width: 620px;} + плюс на бордюры еще 8 пикселей. Меняйте ширинк .wrap

Тогда margin-left: 20px; уменьшайте. А лучше первым трем дивам сделайте margin-right, а последний обзовите иначе, скопируйте стиль и уберите margin

ПРОЩЕ

Вот тут

    .wrap > div.item {float: left; border: 1px solid; margin-left: 20px; width: 138px; height: 260px;}

делай margin-left 10px

У меня 3 margin-left, для первого стоит 0, все выходит правильно.

не на 4, а на 3, у первого блока нулевой отступ

Winston
потестил твой код, вроде все нормально. Какой браузер и доктайп?

Я не могу поменять, нужно чтобы было 20, ни больше ни меньше..

---

Спустя 2 минуты, 55 секунд Winston написал(а):

---

killer8080
Доктайп html5, и в хроме и в FF такая фигня (остальные не тестил)..

---

Спустя 1 минута, 1 секунда Winston написал(а):

---

В опере все OK

Да, проглядел.

При .wrap{width: 626px;} съезжает на 63% масштабе.
При .wrap{width: 628px;} съезжает на 33% масштабе.
При .wrap{width: 644px;} не съезжает на минимальном 33% масштабе.

Действительно, проглядел класс первого дочернего дива. Тем не менее, прибавляйте 8px бордюров, получится ровно 620. Наблюдения по смещению я привел выше.

Браузер Chrome.

Видимо это особенность масштабирования и вы ничего с этим не поделаете. А если разберетесь, укажите как.

Winston
значит эти браузеры криво масштабируют, ширина бордюра остается 1px, а ширина блока изменятся в процентном отношении из-за этого блоки оказываются шире обертки. Тут либо увеличить ширину обертки (поможет до определнной величины), либо просто забить, вряд ли нормальные юзеры масштабируют страницу в минус.

outline вместо border - не вариант?

.wrap > div.item {float: left; outline:1px solid; margin-left: 20px; width: 140px; height: 260px;top:1px}
.wrap > div.first{margin-left: 0px;left:1px}

Если такой вопрос, то можно див положить внутрь первого дива, уже внутреннему дать border. В таком случае border не будет участвовать в формировании ширины блока.

redreem
It works!
Спасибо!!!

inpost
Твой вариант не пробовал, т.к. помог предыдущий совет.

UPD в IE7 бордюров не видно

Это сообщение отредактировал Winston - 20.11.2012 - 11:26

Winston

ну да. в седьмом ишаке аутлайна нет. есть еще вариант - делать внешний див с бакграундом цвета бордюра (item) шириной 140, а в нем див item_content, шириной и высотой на 1px меньше и с белым бакграундом. будет эффект бордюра. а так - проблему уже сказали выше - дробный размер пиксела при масштабировании приводит к переполнению строки.

еще можно сделать блоки не флоат, а просто inline-block и для обертки поставить overflow-x:hidden. вариантов много, все зависит уже от контекста. я как правило в таких случая просто делаю запас в пару пикселов у обертки, чтобы дробность при масштабировании компенсировалась. визуально не видно и работает.

а для IE??

*dysplay:inline