в общем, запутался я окончательно. еще раз задача, есть 4 дива, в них разное кол-во информации (они разные по высоте могут быть). нужно, чтобы они красиво разъезжались при клике.
html:
<div class="firstCat cat current" data-id="1">
</div>
<div class="secondCat cat" style="margin-left:700px;" data-id="2">
</div>
<div class="thirdCat cat" style="margin-left:800px;" data-id="3">
</div>
<div class="fourthCat cat" style="margin-left:900px;" data-id="4">
</div>
css:
.cat {
width:720px;
position: absolute;
background:white;
color: gray;
cursor:pointer;
}
.cat.current {
color:black;
cursor:auto;
}
body {
overflow:auto;
overflow-x: hidden;
}
ну и на jquery у меня при клике на элемент меняются марджины других элементов, визуально они «разъезжаются». тольок возник целый ряд проблем, с моими слабыми знаниями вёрстки они просто нерешаемые)
1. слои уехали за страницу (появился горизонтальный скролл, overflow:hidden; не подходит, т.к. страница всё равно растягивается, только скролл пропадает).
2. если один блок больше другого по высоте, его текст видно под ним, см. скриншот.
3. выглядит отвратительно, не представляю что сделать, чтобы можно было нормально воспринимать информацию.
4. т.к. ширина задана абсолютно, проблемы на другом мониторе. как лучше задать ширину и отступ?
скриншот:
